margin 外邊距

做者：心葉
時間：2018-04-26 20:39

第一步：基礎說明。

margin的意思很容易明白，就是外邊距，用更通俗的話說，就是二個盒子之間間距的設置。

margin有許多須要注意的地方，好比塊級元素垂直相鄰外邊距會合並，行內元素實際上不佔上下外邊距，左右外邊距也不會合並，浮動元素的外邊距也不會合並。

普通元素的margin百分百是按照父級元素（正確的說應該是包含塊，具體能夠看這篇文章關於CSS中設置overflow屬性的值爲hidden的相關理解）的寬來計算的，而絕對定位的元素的margin百分比是按照第一個定位元素（relative，absolute和fixed）的寬來計算的。

第二步：block元素重疊。

block元素（不考慮float和absolute）在垂直方向發生margin重疊（不考慮writing-mode改變書寫方式）；margin三種重疊：1.相鄰兄弟元素；2.父親元素和第一個或最後一個孩子元素；3.空的block元素。

第三步：重疊條件。

父子元素重疊條件（margin-top）

1.父元素非塊狀格式上下文元素；
2.父元素和第一個子元素之間沒有inline元素分割；
3.父元素沒有border-top或padding-top設置。

父子元素重疊條件（margin-bottom）

1.父元素非塊狀格式上下文元素；
2.父元素沒有border-bottom或padding-bottom設置；
3.父元素和最後一個子元素之間沒有inline元素分割；
4.父元素沒有height,min-height和max-height的限制。

空的block元素重疊

1.元素沒有border或padding或inline設置；
2.沒有height或者min-height設置。

第四步：有價值的細節。

重疊計算方法：正正取最大、負負取最小和正負相加。

在書寫方向的垂直方向，margin:auto會自動分配剩餘空間（剩餘空間的意思簡單的能夠理解爲：在沒有設置寬以前的長度去掉你設置的寬餘下的那段距離）。

絕對定位元素的非定位方向margin無效（貌似是的，不過描述不許確，其實一直有效，只不過如今只能夠影響本身，沒法改變兄弟了，所以看起來失效了）。

最後一個題外話，margin-collapse能夠設置重疊方式（collapse默認，重疊、discard取消margin,等於margin:0和separate分隔，就是不發生重疊）。