margin+padding

Posted 2021-01-17 zgdawdl

1.外边距合并：只有在垂直方向上会发生

例：子margin-top > 父margin-top

        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 20px;
            height: 20px;
            background-color: red;
            margin-top: 10px;
        }
        .children{
            width: 10px;
            height: 10px;
            background-color: green;
            margin-top: 20px;
        }

    <div class="parent">
        <div class="children"></div>
    </div>

效果图：

 

2.在布局中的应用

margin：通常用来设置此元素与相邻元素或父元素边框的距离（盒子与 盒子之间的距离）

padding：通常用来设置内容显示的区域

另：通常子元素的margin可以用父元素的padding代替，以此减少不必要的嵌套