邊距重疊的三種狀況

<!-- 父元素的高度計算不包含子元素的上邊距 -->
    <section class="sec">
        <style>
            .sec {
                background: red;
            }

            .child {
                height: 100px;
                margin-top: 10px;
                background: yellow;
            }
        </style>
        <article class="child"></article>
    </section>

    <!-- 兄弟元素上下邊距重疊，兄元素設置下邊距，第元素設置上邊距，邊距取二者中的較大值 -->
    <section class="borther">
        <style>
            .borther div {
                height: 100px;
            }

            .borther .one {
                margin-bottom: 10px;
                background: red;
            }

            .borther .two {
                margin-top: 20px;
                background: yellow;
            }
        </style>
        <div class="one"></div>
        <div class="two"></div>
    </section>

    <!-- 空元素上下邊距重疊，取較大值 -->
    <section class="empty">
        <style>
            .empty .one {
                height: 100px;
                background: red;
            }

            .empty .two {
                margin-top: 20px;
                margin-bottom: 10px;
            }

            .empty .three {
                height: 100px;
                background: yellow;
            }
        </style>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </section>

表現：