Margin Padding的用法_父元素,子元素设置宽高,加margin和padding 的效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46579440/article/details/105081078

本文详细解析了CSS中padding和margin的使用方法，包括它们如何影响元素的位置与大小，设置方式，以及margin的一些常见问题与解决方案。对于网页布局设计者来说，掌握这两个属性的运用至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

padding的用法：
        1: padding是长在内容和盒子之间的，在盒子内部。
        2：padding是为了调整子元素在父元素里面位置关系。
        3：padding的特点：padding值会把盒子撑大。
        4：如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值。
        5：给单一方向设置padding值：
            padding-left/right/top/bottom:;
        6: padding 设置方法：
            padding:1个值      四周
            padding:2个值      上下   左右
            padding:3个值      上     左右    下
            padding:4个值      上右下左
        7: padding不能设置负值
        8: padding不会对背景图造成影响。
        9：如果一个盒子没有设置固定的宽和高，添加padding是不用减的。
margin:
        1: margin长在元素之外的。
        2: margin控制的是同级元素之间的位置关系。
        3: margin不会对盒子本身的宽高造成影响。
        4: 给单一方向添加margin值
            margin-left/right/bottom/top:;
        5: margin的设置方法：
            margin:1个值      四周
            margin:2个值      上下   左右
            margin:3个值      上     左右    下
            margin:4个值      上右下左
        6: margin可以设置负值。
        7: margin常出现的BUG:
            a：当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上面。
            b: 上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置。
        8: margin:0 auto; 让当前元素在父元素里面左右居中。