margin摺疊

時間 2019-11-20

標籤 margin 摺疊欄目 CSS 简体版

原文原文鏈接

什麼是margin摺疊：當兩個或更多個垂直邊距相遇時，它們將造成一個外邊距。這個外邊距的高度等於兩個發生疊加的外邊距的高度中的較大者。
- 注意：

(1) 只有普通文檔流中塊框的垂直外邊距纔會發生外邊距疊加

(2) 行內框、浮動框或絕對定位框之間的外邊距不會疊加

(3) 摺疊後取其中最大的那個margin值做爲最終值

垂直外邊距疊加有三種狀況：

(1) 元素自身疊加：當元素沒有內容(即空元素)、內邊距、邊框時，它的上下邊距就相遇了，即會產生疊加(垂直方向)。當爲元素添加內容、內邊距、邊框任何一項，就會取消疊加。

(2) 相鄰元素疊加：相鄰的兩個元素若是它們的上下邊距相遇，即會產生疊加

(3) 包含(父子) 元素疊加包含元素的外邊距隔着父元素的內邊距和邊框，當這兩項都不存在的時候，父子元素垂直外邊距相鄰，產生疊加。添加任何一項都會取消疊加

//兩個p標籤的上下間距爲100px , 而不是200px , 發生了摺疊
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<title></title>
<style type="text/css">
p{
margin:100px;
}
</style>
</head>
<body>
  <p>這是第一段</p>
  <p>這是第二段</p>
</body>
</html>

須要注意的一點是：在水平書寫模式下發生margin 摺疊的是垂直方向( 即margin-top/margin-bottom).而在垂直書寫模式下，margin摺疊發生在水平方向上( 即margin-left/margin-right)

如何避免margin摺疊

首先總結一下margin摺疊的條件：
- margin摺疊只發生在塊元素上
- 浮動元素不與其餘元素margin摺疊
- 定義了overflow屬性且值不爲visible的塊元素，不與它的子元素髮生margin摺疊
- 絕對定位元素的margin不與其餘任何margin摺疊
- 若是常規流中的第一個塊元素沒有border-top、padding-top , 且其第一個浮動的塊級子元素沒有間隙，則該元素的上外邊距會與其常規流中的第一個塊級子元素的上外邊距摺疊
取消margin摺疊：
- 將元素改成非塊級元素
- 浮動
- 定位
- 設置屬性 overflow:hidden 等方法

參考文章：　css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。