傳統 CSS 和 Flexbox 之間的邊距折疊有何不同？

Flexbox 中的邊距折疊

在傳統CSS 中，當父元素及其最後一個子元素都有邊距時，邊距會折疊為單一邊距。然而，當使用 Flexbox 時，這種折疊行為會改變。

在 Flexbox 中，元素使用 display: flex 屬性在 Flex 容器內對齊。這將建立一個 Flex 格式化上下文，它與區塊格式化上下文在邊距折疊方面有所不同。

在區塊格式化上下文中，邊距折疊如下：

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 20px margin between the last article and footer -->

但是，在Flex 格式化上下文，邊距不會折疊：

#container {
  display: flex;
  flex-direction: column;
}

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 40px margin between the last article and footer -->

這種行為差異是由於Flexbox 單獨的格式化規則所造成的。在 Flex 上下文中，邊距單獨應用於容器內的每個元素，從而產生非折疊邊距。

以上是傳統 CSS 和 Flexbox 之間的邊距折疊有何不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！