CSS保健室｜margin

前言

上次把 padding 比喻成練團室裡的隔音棉，那講到 margin 就先一起唱齊秦的「外面的世界很精彩，外面的世界很無奈」，開心練完團出來後，準備要面對學校課業跟一堆繁瑣的交際壓力，接下來讓 margin 帶你體驗網頁社會的精彩以及瀏覽器 bug 下產生的無奈吧。

cover

（圖片來源）

可以先看看入門的 F2E合作社｜Bootstrap 5 網頁框架開發入門｜共用項目 margin 與 padding 再回頭看看我喔！

margin

margin 簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有 1 到 4 個值。

margin-bottom

margin-bottom 設置元素的下外邊距。

margin-left

margin-left 設置元素的左外邊距。

margin-right

margin-right 設置元素的右外邊距。

margin-top

margin-top 設置元素的上外邊距。

值	描述
auto	瀏覽器計算外邊距。
length	規定以具體單位計的外邊距值，比如像素、、公分等。默認值是 0px 。
％	規定基於父元素的寬度的百分比的外邊距。

需要注意

1. margin 可以是負數的

2. 垂直外邊距合併問題

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距，合併後外邊距的高度等於兩個發生合併的外邊距的高度中的較大者，這就是 margin 重疊。

3. 第一個子元素的 margin-top 問題

這是實際工作經常碰到的一個問題，第一個子元素的 margin-top 會頂開父元素與父元素相鄰元素的間距，這個問題發生的原因是一個盒子如果沒有上補白( padding-top )和上邊框( border-top )，那麼這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊，也就是說，父元素第一個子元素的上邊距 margin-top 如果碰不到有效的 border 或者 padding 就會不斷一層一層的向上找。

解決方法就是給父級元素設置個有效的 border-top 或者 padding-top 就可以了，這麼寫當然能解決問題，不過感覺很奇怪，為了寫一個 margin-top ，就強制給父級元素加一個 border-top 或者 padding-top ，與其這樣，還不如直接設置成 padding-top ，那什麼時候該用 margin ，什麼時候用 padding ？

4. 用 margin 還是用 padding

何時使用 margin ：

需要在 border 外側添加空白時。
空白處不需要背景（色）時。
上下相連的兩個盒子之間的空白，需要相互抵消時。如 15px + 20px 的 margin ，將得到 20px 的空白。

何時使用 padding ：

需要在 border 內測添加空白時
空白處需要背景（色）時
上下相連的兩個盒子之間的空白，希望等於兩者之和時。如 15px + 20px 的 padding ，將得到 35px 的空白。

5. margin 在 block 元素、 inline 元素中的區別

margin 在 block 元素下，它的性能可以完全體現，在 inline-block 元素下也是有效果的，但是 margin-top 和 margin-bottom 對 inline 元素的高度沒有影響。

margin 在 inline 元素中的效果跟 inline-block 元素下效果一致。

6. IE 瀏覽器下 margin 出現的 bug

IE6/7/8 下 auto margin 居中 bug ：

發生場合：給 block 元素設置 margin auto 無法居中
解決方法：出現這種 bug 的原因通常是沒有 Doctype ，然後觸發了 IE 的 quirks mode ，加上 Doctype 聲明就可以了。
原理分析：缺少 Doctype 聲明。

IE8 下 input[button | submit] 設置 margin:auto 無法居中：

發生場合： IE8 下，如果給 button 這樣的標籤（ button input[type="button"] input[type="submit"] ）設置{ display : block; margin:0 auto; }，如果不設置寬度的話無法居中。
解決方法：可以給為 input 加上寬度
原理分析： IE8 瀏覽器 Bug 。

IE8 百分比 padding 垂直 margin bug ：

發生場合：當父元素設置了百分比的 padding ，子元素有垂直的 margin 的時候，就好像父元素被設置了 margin 一樣。
解決方法：給父元素加一個 overflow: hidden/auto; 。
原理分析： IE8 瀏覽器 Bug 。