margin+padding

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代替，以此減小沒必要要的嵌套