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代替，以此減少不必要的巢狀