關于CSS外邊距塌陷的問題

SunZhaopeng 發布于2019-08-01 17:35 / 3472人閱讀

摘要：關于外邊距塌陷合并的問題主要資料來源定義塊的頂部外邊距和底部外邊距有時被組合折疊為單個邊框，其大小是組合到其中的最大外邊距，這種行為稱為外邊距塌陷合并發生外邊距塌陷的三種情況相鄰的兄弟姐妹元素此時兩個中間的距離并不是，而是。

關于CSS外邊距塌陷（合并）的問題
主要資料來源：https://developer.mozilla.org...

定義

塊的頂部外邊距和底部外邊距有時被組合（折疊）為單個邊框，其大小是組合到其中的最大外邊距，這種行為稱為外邊距塌陷（合并）

發生外邊距塌陷的三種情況

相鄰的兄弟姐妹元素

此時兩個div中間的距離并不是60px，而是50px。就是說這里并不是兩個margin的和，而是取的兩者中較大的那個。

2.塊級父元素與其第一個/最后一個子元素

如果塊級父元素中，不存在上邊框、上內邊距、內聯元素、清除浮動這四條屬性（也可以說，當上邊框寬度及上內邊距距離為0時），那么這個塊級元素和其第一個子元素的上邊距就可以說“挨到一起了”。此時這個塊級父元素和其第一個子元素就會發生上邊距合并。即這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。類似的，若塊級父元素的margin-bottom與它的最后一個子元素的margin-bottom之間沒有父元素的border、padding、inline content、height、min-height、max-height分隔時，就會發生下邊距合并現象。

可以看出margin的變化，但是引用中說的清除浮動，沒有明白具體指的是什么（div中如果設置了float是不會發生邊界融合的）。如果父元素設置了border，那么margin也不會發生融合現象。

注意：

如果div中有內容，可以自行撐開，不會發生融合

父元素設置了padding、border，不會發生合并

父元素或者子元素設置了float或者position：absolute，不會發送融合（可以理解為BFC會阻止元素外邊距合并。）

解決方案：

設置padding或者border

觸發BFC

哪些元素會生成BFC？

根元素

float屬性不為none

position為absolute或fixed

display為inline-block、table-cell、table-caption、flex、inline-flex

overflow不為vidible

3.空塊元素

如果存在一個空的塊級元素，border、padding、inline content、height、min-height都不存在，那么上下邊距中間將沒有任何阻隔，上下外邊距將會合并。

這個段落的和下面段落的距離將為20px

這個段落的和上面段落的距離將為20px

可以理解成中間div寬度為0且上下邊距融合，只取margin的最大值。

云服務器 GPU云服務器 html 的外邊距外邊距重疊 html外邊距上下 html外邊距顏色

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51243.html

關于CSS外邊距塌陷的問題

摘要：關于外邊距塌陷合并的問題主要資料來源定義塊的頂部外邊距和底部外邊距有時被組合折疊為單個邊框，其大小是組合到其中的最大外邊距，這種行為稱為外邊距塌陷合并發生外邊距塌陷的三種情況相鄰的兄弟姐妹元素此時兩個中間的距離并不是，而是。關于CSS外邊距塌陷（合并）的問題主要資料來源：https://developer.mozilla.org... 定義塊的頂部外邊距和底部外邊距有時被組合（...

cyrils 2019-08-29 13:24 評論0 收藏0
css隨堂筆記（三）

摘要：隨堂筆記三關于背景圖片設置背景圖片圖片的路徑背景圖片位置方位名詞背景位置如果只設置一個方位詞，另外一個默認居中如果設置的值是兩個方位詞，與順序無關數值背景位置如果設置的值是數字一個值得時候，表示水平方向的位移，垂直方向默認居中兩個值得Css隨堂筆記（三） 1 關于背景圖片 ? A 設置背景圖片：background-image：url(圖片的路徑)； ? B 背景圖片位置： backgrou...

focusj 2019-04-23 13:26 評論0 收藏0
前端面試題-BFC(塊格式化上下文)

摘要：一的概念規范解釋塊格式化上下文，是頁面的可視化渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。我們可以使用實現清除浮動，這里就不多介紹了，想要了解的可以閱讀前端面試題清除浮動。一、BFC 的概念 1.規范解釋塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的...

Ryan_Li 2019-08-30 14:06 評論0 收藏0
前端面試題-BFC(塊格式化上下文)

摘要：一的概念規范解釋塊格式化上下文，是頁面的可視化渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。我們可以使用實現清除浮動，這里就不多介紹了，想要了解的可以閱讀前端面試題清除浮動。一、BFC 的概念 1.規范解釋塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的...

layman 2019-08-01 18:41 評論0 收藏0
【css】常見問題

摘要：將元素顯示為內聯元素，元素前后沒有換行符。我們知道內聯元素是無法設置寬高的，所以一旦將元素的屬性設為，設置屬性和是沒有用的。這個屬性值融合了和的特性，即是它既是內聯元素，又可以設置和。 CSS 中 inline 元素可以設置 padding 和 margin 嗎？行內元素設置width,height無效。但是設置margin和padding是有效的。行內非替換元素的外邊距不會改變一個...

renweihub 2019-08-29 16:25 評論0 收藏0