摘要：屬性指定了盒的區(qū)的寬度。簡(jiǎn)寫屬性一次性設(shè)置四周的，而其它屬性只設(shè)置它們各側(cè)的。

margin屬性指定了盒的margin區(qū)的寬度。margin簡(jiǎn)寫屬性一次性設(shè)置四周的margin，而其它margin屬性只設(shè)置它們各側(cè)的。這些屬性適用于所有元素，但非替換行內(nèi)元素上的豎直margin將不會(huì)產(chǎn)生任何效果

margin與可視尺寸

只適用于沒(méi)有設(shè)定width/height的普通block元素

只適用于水平方向尺寸

一側(cè)定寬的自適應(yīng)布局(未修改版)

margin與占據(jù)尺寸

我們修改圖片的margin-bottom值,容器的高度隨著margin值變化

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

與有沒(méi)有設(shè)定width/height值無(wú)關(guān)

適用于水平方向和垂直方向

滾動(dòng)容器內(nèi)上下留白

普通元素百分比

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

絕對(duì)定位百分比

絕對(duì)定位元素的百分比margin是相對(duì)于第一個(gè)祖先定為元素(relative/absolute/fixed)的寬度計(jì)算的

寬度2:1自適應(yīng)矩形

CSS中，兩個(gè)或者多個(gè)盒（可能但不一定是兄弟）的相鄰的margin會(huì)被結(jié)合成一個(gè)margin。Margin按這種方式結(jié)合叫合并（collapse），產(chǎn)生的結(jié)合的margin叫做margin重疊

CSS里面關(guān)于重疊的條件:

都屬于流內(nèi)(In-flow)塊級(jí)盒,處于同一個(gè)塊級(jí)格式化上下文(BFC)

沒(méi)有行盒(line box),沒(méi)有空隙,沒(méi)有padding并且沒(méi)有border把它們隔開(kāi)

都屬于豎直相鄰盒邊(vertically-adjacent box edges)

相鄰兄弟元素的重疊

父級(jí)和第一個(gè)/最后一個(gè)子元素

需要注意的是,overflow:hidden只在父子元素margin重疊時(shí)有效,相鄰兄弟元素重疊中無(wú)效

margin-top重疊

父元素非塊狀格式化上下文元素

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

父元素沒(méi)有padding-top值

父元素和第一個(gè)子元素之間沒(méi)有inline元素分隔

margin-bottom重疊

上面的四個(gè)例子都可以導(dǎo)致margin-bottom重疊,除此之外

父元素沒(méi)有height,min-height,max-height限制

空block元素margin重疊

空block元素margin重疊其他條件

元素沒(méi)有border設(shè)置

元素沒(méi)有padding值

里面沒(méi)有inline元素

沒(méi)有height或者min-height

正正取大值

正負(fù)值相加

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

在互聯(lián)網(wǎng)早期,網(wǎng)頁(yè)主要是以文字為載體,連續(xù)段落或列表如果沒(méi)有margin重疊,首尾項(xiàng)間距會(huì)和其它兄弟標(biāo)簽1:2關(guān)系,排版不自然.所以margin重疊主要是為了解決文字布局排版的問(wèn)題.

在表單中,使用.list{margin-top:15px;margin-bottom:15px;},比.list{margin-top:15px;}更具有健壯性,最后一個(gè)元素移除或位置調(diào)換,均不會(huì)破壞原來(lái)的布局

margin:auto的各種特性演示

例1,塊級(jí)元素,就算沒(méi)有設(shè)置width或height,也會(huì)自動(dòng)填充

例2,作為絕對(duì)定位元素,width自動(dòng)填滿父級(jí)第一個(gè)定位元素容器

例3,此時(shí),如果設(shè)置width或height,自動(dòng)填充特性就會(huì)被覆蓋

例4,設(shè)置margin-right:100px,margin-left:auto,則margin-left為剩余空間大小即width-margin-right

例5,兩邊均設(shè)置margin:auto則平分剩余空間

margin左右均設(shè)置auto,圖片水平居中

margin:0 auto沒(méi)有使圖片水平居中,因?yàn)閕mg是inline水平元素,需要設(shè)置display:block屬性,這樣,就算沒(méi)有width,元素也會(huì)占據(jù)整個(gè)容器

改變流動(dòng)方向,使用margin:auto垂直居中

使用margin:auto,絕對(duì)定位的水平垂直居中,瀏覽器要求IE8+

上例中絕對(duì)定位的水平垂直居中的原理

常規(guī)流中的margin負(fù)值

在常規(guī)流中,設(shè)置margin-left:-20px,元素會(huì)向左移動(dòng)-20px,對(duì)于設(shè)置margin-top也一樣.

當(dāng)設(shè)置margin-right:-20px;,元素本身不會(huì)移動(dòng),后面的元素會(huì)向左移動(dòng)20px到該元素上.對(duì)于設(shè)置margin-bottom同理

同時(shí),在元素不指定寬度的情況下,如果設(shè)置margin-left或者margin-right為負(fù)值的話,會(huì)在元素的對(duì)應(yīng)方向上增加其寬度.

相對(duì)定位元素的margin

當(dāng)設(shè)置margin-bottom/top的時(shí)候,表現(xiàn)如上,需要注意的是,設(shè)置了position:relative屬性的元素會(huì)覆蓋在后面的元素上面(后面的元素沒(méi)有設(shè)置定位以及Z-index)

float與marginDemo

對(duì)于設(shè)置了float的margin,設(shè)置margin為負(fù)值的時(shí)候,表現(xiàn)如下:

如果設(shè)置的margin的方向與float相同,那么,元素會(huì)往對(duì)應(yīng)的方向移動(dòng)對(duì)應(yīng)的距離.

如果設(shè)置margin的方向與float的方向相反,則元素不動(dòng),元素之前或者之后的元素會(huì)向該元素的方向移動(dòng)相應(yīng)的距離.

第二個(gè)例子是使用margin負(fù)值與float實(shí)現(xiàn)的一列定寬的兩列流式布局

垂直居中對(duì)齊Demo

給元素設(shè)置absolute，left、top分別為50%；然后margin-top為 負(fù)的高度的一半、margin-left為 負(fù)的寬度的一半

這種方法的缺點(diǎn)是需要固定寬高

有邊框的列表布局

這里用margin與padding的偏移使邊框重合

有間距的列表布局以及兩端對(duì)齊

兩個(gè)例子用到當(dāng)元素沒(méi)有固定寬度時(shí)負(fù)值會(huì)增加自身寬度

第一個(gè)例子實(shí)現(xiàn)有間距的列表布局,其中需要消除ul的樣式,并且在ul設(shè)置margin負(fù)值抵消li中的margin值

第二個(gè)例子實(shí)現(xiàn)margin負(fù)值下的兩端對(duì)齊

一側(cè)定寬自適應(yīng)布局以及DOM順序正確的修改版

第一個(gè)例子的重點(diǎn)是給左邊的div嵌套了一個(gè)父級(jí)div并設(shè)置為寬度100%,這樣當(dāng)容器寬度變化時(shí),左邊的div自適應(yīng)

第二個(gè)例子,我們利用同樣的原理,來(lái)使DOM順序和最終視覺(jué)順序相符,也就是上面第一個(gè)一側(cè)定寬的自適應(yīng)布局的修改版

等高列布局Demo

等高列布局主要利用了padding會(huì)顯示背景顏色的原理,先給div一個(gè)巨大的margin負(fù)值,從而產(chǎn)生塌陷,再使用padding正值填補(bǔ)塌陷,從而達(dá)到多等高列布局

半遮擋的標(biāo)題Demo

這個(gè)例子使用relative屬性會(huì)在后面元素上面顯示的特性,配合margin負(fù)值偏移

圣杯布局Demo

圣杯布局中,需要注意:

三欄都使用浮動(dòng),需要使用clear:both清除浮動(dòng)影響

左右兩列需要使用position:relative以及負(fù)margin來(lái)達(dá)到三欄一行的目的

父容器需要指定跟左右兩欄寬度相同的padding,用來(lái)盛放左右兩欄

圣杯布局詳細(xì)介紹

雙飛翼布局Demo

雙飛翼布局是圣杯布局的改良版,區(qū)別在于對(duì)待中間欄內(nèi)容不被遮擋的處理.
圣杯布局用padding以及相對(duì)定位來(lái)處理,而雙飛翼布局讓中間欄新增div的margin處理

CSS深入理解之margin
理解并運(yùn)用 CSS 的負(fù) margin 值
margin負(fù)值詳解