CSS中margin屬性的用法介紹

本篇內容主要講解“CSS中margin屬性的用法介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS中margin屬性的用法介紹”吧!

盒模型

接觸過 CSS 的人應該都知道 CSS 的盒模型：

由內容邊緣（Content edge）包圍形成的是內容盒（Content Box），類推還有內邊距盒（Padding Box）、邊框盒（Border Box）、外邊距盒（Margin Box）。
其中內容盒、內邊距盒、邊框盒的背景由background屬性決定，而外邊距盒的背景是透明的。

CSS margin 屬性

關于 margin 屬性，有幾點可能跟我們的直覺不相符：

1、如果 margin 的值是百分比，則是相對于父元素的內容盒寬度來計算的，即使 margin-top 和 margin-bottom 也是如此。因此即使父元素的高寬不相等，子元素的 margin 元素指定了相同的百分比值，則子元素各個方向的 margin 計算值都是相等的。
2、margin-top 和 margin-bottom 值對行內非替換元素（non-replaced inline element）是無效的。因此我們可以指定 img 元素的 margin-top 和 margin-bottom，而非替換行內元素（如 i，span 等）設置 margin-top 和 margin-bottom 卻不會產生效果。

相鄰的 margin（Adjoining margin）

如果兩個垂直方向上的 margin，它們中間沒有其他垂直 margin，但它們之間不一定相接觸，我們就說這兩個 margin 是垂直毗連（vertical-adjacent）的，包括以下四種情況，滿足其中之一即可：

• 父元素的 top margin 和第一個子元素的 top margin
  父元素的bottom margin 和最后一個子元素的 bottom margin
  元素的 bottom margin 和與這個元素相鄰的兄弟元素的 top margin
  如果一個元素，它沒有生成 BFC、沒有包含正常流的子元素、min-height是0、height是0或者 auto，則它的 top margin 和 bottom margin 也是垂直毗連的

如果兩個 margin 滿足以下三個條件，我們就說這兩個 margin 是相鄰（adjoining）的：

1、這兩個 margin 是垂直毗連的，即滿足上面四種情況之一
2、margin 的兩個元素都是正常流的塊級元素，并且在同一個 BFC 中
3、兩個 margin 之間沒有行盒（line box）、清除浮動后的空隙（clearance）、padding和 border

margin 折疊（Collapsing margins）

margin 折疊，即相鄰的 margin 有可能會被折疊成一個。

比如元素 #a 指定了 margin-bottom 為 10px，而它下方的元素 #b 指定了 margin-top 為 20px，如這樣：

元素 #a 的 margin-bottom 和元素 #b 的margin-top 在位置上重疊了，它們之間的距離是 20px，即元素 #b 的 bottom margin 長度，這就是 margin 折疊現象。關于這個現象，可以這么理解：

margin 定義的是它與其他盒子之間的最小間距。其中元素 #a 指定了 margin-bottom 為 10px，就表明它下方的元素 #b 與它至少要有 10px 的距離，它指定的是一個最小值，因此實際的距離可以比這個大。

元素 #a 下方的元素 #b 也設置了 margin-top 為 20px，如果不折疊，則他們之間就有 30px 的距離。如果折疊成了一個 20px 的距離，則對元素 #a 來說，它的 margin-bottom 要求至少要有 10px 的距離，是滿足的，而對于元素 #b 來說，它的 margin-top 要求至少要有 20px 的距離，也是滿足的。

而 margin 折疊的存在，其實是為了可以在視覺上顯得更美觀，也更貼近設計師的預期。

margin 折疊規則

并不是所有的 margin 都可以折疊，需要滿足以下條件：

• 垂直相鄰的 margin 才有可能折疊，水平 margin 永遠不折疊
  根元素（即 html 元素）的 margin 永遠不折疊
  如果一個元素，它的 top margin 和 bottom margin 是相鄰的，并且有清除浮動后的空隙（clearance），這個元素的 margin 可以跟兄弟元素的 margin 折疊，但是折疊后的 margin 不能跟父元素的 bottom margin 折疊。

需要注意的是，margin 并不是只能折疊一次，多個滿足要求的 margin 都可以進行折疊形成一個折疊后的 margin（collapsed margin）。
并且假如這個折疊后的 margin 是由 margin A 等折疊而來的，如果有 margin X 跟 margin A 是相鄰的，則我們也認為 margin X 跟這個折疊后的 margin 相鄰。

折疊后的 margin 大小

當兩個或者兩個以上的 margin 折疊后，margin 的值計算如下：

• 如果 margin 都是正數，則取他們當中的最大值
  如果 margin 中有正有負，則取最大的正數加上最小的負數（如最大的 margin 是 20px，最小的 margin 是 -20px，則他們計算后的值是 0）
  如果 margin 中都是負數，則取他們當中的最小值

幾道思考題

浮動、定位元素的 margin 不會和其他任何元素的 margin 發生重疊，包括它的子元素。

這是因為浮動元素脫離了正常流，所以它和其他相鄰元素就不處與同一個流中，自然不相鄰；又因為浮動元素的內容盒會形成一個新的 BFC，所以浮動元素跟子元素不處與同一個 BFC 中，因此它們的 margin 也不能折疊。定位元素同理可得。

inline-block 的元素不會和其他元素的 margin 發生折疊，包括它的子元素。

因為 margin 折疊只會發生在塊級元素上，因此 inline-block 元素的 margin 不會和兄弟元素折疊，又因為 inline-block 的內容盒會形成一個新的 BFC，所以 inline-block 元素本身也不會和子元素的 margin 發生折疊

margin 折疊的幾個栗子

栗子1

如果兩個 margin 滿足以下三個條件，我們就說這兩個 margin 是相鄰（adjoining）的：

兩個 margin 之間沒有行盒（line box）、清除浮動后的空隙（clearance）、padding和邊框

針對這個條件，我們通過增加 padding 的方式來阻止 margin 的折疊：

如果 #container 沒有下邊框，則 #container 的 bottom margin 和 #inner 的 bottom margin 是相鄰的，因此它們折疊了，并且 #inner 撐開了 #container 元素，所以可以看到 #container 元素的高度變成了 10px，且顯示的是 #inner 的紅色背景

當給 #container 添加一個下邊框，兩個 margin 之間就邊框的阻隔，他們就不相鄰了，因此不能折疊。所以可以看到 #container 被撐開成了 20px，其中 10px 是 #inner 的高度，還有 10px 是 #inner 的 bottom margin，并且由于 margin 是透明的，因此 #container 露出了部分藍色的背景。

栗子2：

如果兩個 margin 滿足以下三個條件，我們就說這兩個 margin 是相鄰（adjoining）的：

margin 的兩個元素都是正常流的塊級元素，并且在同一個 BFC 中

我們通過創建新的 BFC來阻止 margin 的折疊：

如上圖 #container 元素和 #inner 元素同屬于一個 BFC 中，#container 的 top margin 和 #inner 的 top margin 折疊，bottom margin 同理。
但如果讓 #container 跟 #innter 處在不同的 BFC 中，則 top margin 和 bottom margin 都不會折疊，如：

給 #container 元素增加一個 overflow: hidden 屬性，讓它的內容盒生成一個獨立的 BFC，而 #inner 處于這個獨立的 BFC 中，因此 #container 和 #inner 就處于兩個不同的 BFC 中了，所以他們的 margin 不能折疊。

栗子3：

如果一個元素，它本身的 top margin 和 bottom margin 是相鄰的，并且有清除浮動后的空隙（clearance），這個元素的 margin 可以跟兄弟元素的 margin 折疊，但是折疊后的 margin 不能跟父元素的 bottom margin 折疊。

給父元素 #container 設置了一個灰色背景，并且沒有設置高度，因此高度會隨著內容而擴展，margin 設置為 50px。
其中有一個紅色的浮動元素 #floated，高寬都設置為 40px。
給 #cleared 設置了 15px 的 margin，并且元素的高度、padding、margin 都為0，因此 #cleared 元素的 top margin 和 bottom margin 是相鄰的。這個元素的位置如下圖所示：

因為 #cleared 元素清除了左浮動，所以 #cleared 元素下移。
而 #cleared 元素和 #slibling 元素的 margin 折疊了，因此可以看到他們的位置是重疊的。

由于這條規則的存在，導致他們折疊后的 margin 不能跟 #container 的 bottom margin 進行折疊，因此 #container 的高度被撐開。

如果沒有這條規則，他們還應該跟 #container 的 bottom margin 進行折疊，如：

以上這張圖，在去掉了 #cleared 元素的 clear 屬性之后，就不滿足這條規則了，所以可以看到 #container 的高度就只有 40px，即紅色的浮動元素的高度，而 #cleared 元素、#sibling 元素、#container 元素的 margin 都折疊成了一個。

到此，相信大家對“CSS中margin屬性的用法介紹”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！