摘要：前言致謝本文總結(jié)于張鑫旭老師的深入理解之課程，感謝張老師的辛苦付出難學(xué)的作為前端狗的我們，每天都要和網(wǎng)頁打交道。頁面中任何地方，嵌套或直接放入任何空的，都不會影響原來的布局。比如，給元素聲明，但在中的屬性是。

　本文總結(jié)于 張鑫旭老師的 CSS深入理解之margin課程，感謝張老師的辛苦付出！

　作為前端狗的我們，每天都要和網(wǎng)頁打交道。當(dāng) UI 將設(shè)計稿發(fā)給你時，CSS 的知識便顯得尤為重要。而 CSS 這一標(biāo)記性的語言，卻時常讓我很頭疼：毫無邏輯性，并充滿了各種坑爹的潛規(guī)則 ，以至于每次做項目時，大部分時間精力都浪費在了調(diào)整布局與樣式上，詳情可點擊知乎上的為什么 CSS 這么難學(xué)？問題，道出了我的心聲 :(

　但誰叫我們是吃這碗飯的呢，不管怎樣，有困難必須迎面解決，學(xué)好 CSS ，向張老師看齊！

margin 算是性格剛烈的屬性了，下面，我將從各個方面講解 margin 的可怕之處。

通常一個元素的尺寸可分為：可視尺寸 與 占據(jù)尺寸

可視尺寸 - clientWidth (border - padding - size)

占據(jù)尺寸 - outerWidth (border - margin)

margin 又是怎樣影響這兩個尺寸的呢？

首先，兩個尺寸都需滿足一定的條件。

適用于 沒有設(shè)定 width/height 的塊級元素 (寬高設(shè)死了，怎么會影響呢？)
其中不包括 float absolute fixed 元素 ，inline水平 ，table-cell 元素

只適用于水平方向尺寸（margin-left/margin-right）

適用于 block/inline-block 水平元素

適用于 任何方向

與 width/height 值無關(guān)

inline 元素只影響水平方向 (后面會提到)

margin 影響元素的可視水平尺寸
margin的可視尺寸示例

margin 影響占據(jù)尺寸 ，這個可以說是 margin 的本命技能了，就不舉例了。

通常而言，margin 的單位中，百分比單位最容易讓人頭暈。

普通元素的百分比 margin 都是相對于 容器的寬度 計算的

絕對定位的百分比 margin 是相對于 第一個具有定位屬性的祖先元素的寬度 計算的(relative/absolute/fixed)

重疊可謂是 margin 中的最重要的潛規(guī)則了。

相鄰的兄弟元素

父級和第一個/最后一個子元素

空的塊級元素（自己和自己）

塊級元素 （不包括 float 和 absolute 元素）

不考慮 writing-mode，只發(fā)生在垂直方向 （margin-top/margin-bottom）

父子 重疊條件

margin-top 重疊

父元素 非格式化上下文元素 沒有設(shè)置 overflow:hidden

父元素沒有 border-top 設(shè)置

父元素沒有 padding-top 設(shè)置

父元素和第一個子元素之間沒有inline元素分割

margin-bottom 重疊

父元素 非格式化上下文元素 沒有設(shè)置 overflow:hidden

父元素沒有 border-bottom 設(shè)置

父元素沒有 padding-bottom 設(shè)置

父元素和第一個子元素之間沒有inline元素分割

父元素沒有 height ，min-height，max-height 限制

空的塊級元素 margin 重疊條件

1. 元素沒有 border 設(shè)置
2. 元素沒有 padding 設(shè)置
3. 里面沒有 inline 元素
4. 沒有 height，或者 min-height

正正取大值

兩個元素垂直距離為 : #top元素的 margin-top值

正負(fù)值相加

兩個元素垂直距離為: #top元素的margin-top值 加上 #bottom元素的margin-bottom值

負(fù)負(fù)最負(fù)值

兩個元素垂直距離為 : #top元素的 margin-top值

父級和第一個/最后一個子元素 發(fā)生重疊
給子元素設(shè)置垂直方向的 margin ，等同于 給父元素設(shè)置相同的垂直方向的 margin 屬性，
也就是說 父子元素發(fā)生 margin 重疊時， 它們倆共用一個 margin 屬性

連續(xù)段落或列表之類，如果沒有margin重疊，排版會不自然。

頁面中任何地方，嵌套或直接放入任何空的 div，都不會影響原來的布局。

遺落空的任意多個 p 元素，不會影響原來的閱讀排版。

當(dāng)你使用 margin auto 時，就應(yīng)該聯(lián)想到一個詞 ：填充

一個沒有設(shè)置寬高的塊級元素，會自動填充寬度
如果 一側(cè)是定值，一側(cè)是 auto，則 auto 為剩余空間的大小
如果兩側(cè)均是 auto，則平分 剩余空間

示例如下：

以上，我們可得當(dāng)一個塊級元素設(shè)置了 margin: 0 auto 可以實現(xiàn)水平居中，

而為什么 margin:auto 0 不會垂直居中？

答：一個塊級元素會自動填充可用的水平尺寸，但不會填充垂直尺寸，是因為其根本沒有任何可用的垂直空間。也就是說 margin: 0 auto , 總是有尺寸可以來填充的！ 而 margin: auto 0 是沒有任何尺寸的可以來填充的。

當(dāng)子元素的寬度大于父元素的寬度 ，是無法通過 margin: 0 auto 實現(xiàn)居中的
因為，這個時候已經(jīng)沒有任何空間可以填充了，當(dāng)寬度超出父元素時，margin 已經(jīng)為負(fù)值了。

writing-mode 與垂直居中

絕對定位元素

inline 水平元素的垂直margin 無效（margin-top/margin-bottom）

margin 重疊發(fā)生

絕對定位元素非定位方位的 margin值 "無效"
因為 絕對定位元素 脫離了文檔流，與相鄰元素沒有關(guān)系，所以它不可能像普通元素一樣，設(shè)置margin，推走其他元素

margin 鞭長莫及
因為 有某些元素破壞了 文檔流，設(shè)置了 float absolute，造成了假象，margin不會根據(jù) 這些破壞元素作為標(biāo)準(zhǔn)

display:table-cell/display:table-row 等聲明的margin無效！某些替換元素除外，根據(jù)各個瀏覽器的實現(xiàn)方式作為區(qū)分。比如，給 button 元素聲明 display:table-cell，但在 chrome 中,button 的 display 屬性是 inline-block 。

內(nèi)聯(lián)特性導(dǎo)致 margin 失效
margin-top: 負(fù)無窮， 但是，小到 1em 便無效了。
因為它是內(nèi)聯(lián)元素，默認(rèn)是基線對齊，x字母下邊緣對齊，margin 值再大，也不會起作用。
margin負(fù)無窮情景解析

margin-start

正常流向，margin-start 等同于 margin-left，兩者重疊不相加

如果水平流向是從右向左，margin-start 等同于 margin-right

在垂直流下 ( writing-mode:vertical-*; ) margin-start 等同于 margin-top

margin-end 與 margin-start 相對

margin-before 默認(rèn)情況等同于 margin-top

margin-after 默認(rèn)情況等同于 margin-bottom

margin-collapse

margin-collapse:collapse;

(默認(rèn)值) 發(fā)生重疊

margin-collapse:discard;

取消重疊，margin 重疊部分為 0 ，沒有margin

margin-collapse:separate;

不發(fā)生重疊，margin 重疊部分為 margin-top + margin-bottom

margin 課程就到此結(jié)束了，再次感謝張鑫旭老師的辛苦付出！

深入Web全棧各項技術(shù)，堅持原創(chuàng)，文章更新雖不定，但只為質(zhì)量而生，如果您喜歡此篇文章，歡迎支持關(guān)注。