垂直邊距折疊如何與 CSS 中的巢狀元素搭配使用？

理解嵌套垂直邊距折疊

CSS 中垂直邊距折疊的概念可能會令人困惑，尤其是在嵌套元素時。讓我們用一個簡單的解釋來分解這個機制。

控制邊距折疊的兩個基本規則：

1. 接觸邊距折疊：當相鄰元素的垂直邊距接觸時，它們折疊成一個邊距。
2. 巢狀依偎：如果只有邊距分隔巢狀元素，它們就會「依偎」在一起，消除內部元素的邊距所建立的任何空間。

考慮以下HTML 結構：

<code class="HTML"><div id="outer">
    <div id="inner">
        A
    </div>
</div></code>

以及初始CSS 樣式：

<code class="CSS">#outer {
    margin-top: 10px;
    background: blue;
    height: 100px;
}

#inner {
    margin-top: 20px;
    background: red;
    height: 33%;
    width: 33%;
}</code>

在這種情況下，嵌套div 的邊距( 20px) 會觸發邊距折疊加上外部div 的邊距(10px)，導致整個區塊的總邊距為20px。由於缺乏非邊距分隔，內部 div 會緊貼容器的開頭。

但是，如果我們在邊距之間引入任何分隔，例如邊框甚至不間斷空格，崩壞了。這是因為不再被視為「接觸」的邊距不會折疊。

請記住，這些規則不適用於常規流以外的元素（例如，浮動或絕對定位的元素）。掌握這些概念將幫助您清楚地了解在 CSS 中嵌套元素時垂直邊距的行為。

以上是垂直邊距折疊如何與 CSS 中的巢狀元素搭配使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！