tags: 2019年鐵人賽 、 css

前言

介紹 black 元素的垂直排版前要先了解 Margin collapse，不然在垂直排版時會出現一堆迷之間距，
就像下面這張圖，用Devtool 指到 <main> tag 父層，明明沒有 margin ，間距那爆出來的？

Margin collapse

摘自MDN
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.

簡單來說就是 black 元素們之間的 margin-top 和margin-bottom 赤裸裸相遇沒有 border 或 padding 隔開時，會產生重疊合成單一的 margin-top 和margin-bottom (其值會選擇最大值)。

會發生 Margin collapse 的基本情況如下

1.相鄰的兄弟姊妹元素

範例

<p>第一段落</p>
<p>第二段落</p>

p{
  color: white;
  background-color: blue;
}

<p> 在 Chrome 上有預設16 px的 margin-top 和margin-bottom

幻想呈現

用Devtool看會發現...
第一個 <p> 的 margin-bottom 和第二個 <p> 的 margin-top 重疊了！

2.父層和自己的第一個/最後一個子元素

範例

<main>
  <h1>標題</h1>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores dolor voluptas exercitationem ullam dolores repellendus.</p>
</main>
<footer>聯絡資訊</footer>

main{
  text-align: center;
  background-color: yellow;
  color: grey;
}
footer{
  color: white;
  text-align: center;
  background-color: black;
}

父層 <main> 的 margin 可以想成0，但為何出現間距？

繼續看下去...

會發現第一個子元素 <h1> 的 margin-top 和父層 <main> 的 margin-top 相遇後發現彼此沒有別人阻礙，就合而為一了！

同理
最後一個子元素 <h1> 的 margin-bottom 和父層 <main> 的 margin-bottom 相遇後發現彼此沒有別人阻礙，就合而為一了！

所以，就算父層 <main> 沒有 margin ，但為何出現間距？

還記得重要所以要說三次的那段話嗎？
相遇後發現彼此沒有別人阻礙，就合而為一了！

就是因為

• 父層的 margin-top = 第一個子元素的 margin-top
• 父層的 margin-bottom = 最後一個子元素的 margin-bottom

解決方法可以用 border 或 padding 隔開，還有之後會介紹的 BFC !

這裡介紹兩種基本情況，如果想了解更深入 Margin collapse 可以參考這篇What’s the Deal with Margin Collapse?