| 以下是引用片段： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> * { border:0px solid red; } <div class='content' > <div class="col onecol" > 1/10 </div> |
樣式都是margin:0
兩行代碼都一樣,但是標(biāo)簽中間的空格的顯示會(huì)加上空白間隙
如果把標(biāo)簽中間的空格都刪除掉,然后就跟樣式完全相符
手動(dòng)刪除空格也不是個(gè)辦法吧?
因?yàn)槟阌昧薸nline-block,空格也會(huì)在里面，你直接用浮動(dòng)就沒有這個(gè)了
外邊距折疊，指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 在垂直方向會(huì)合并成一個(gè)外邊距。
觸發(fā)條件：
毗鄰，沒有被非空內(nèi)容、padding、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系
這些 margin 都處于普通流中，即非浮動(dòng)元素，非定位元素
垂直方向外邊距合并的計(jì)算
1) 參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。
<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div> <div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>
示意圖：
2). 參與折疊的 margin 都是負(fù)值：取的是其中絕對(duì)值較大的，然后，從 0 位置，負(fù)向位移。
<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div> <div style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>
示意圖：
3). 參與折疊的 margin 中有正值，有負(fù)值：先取出負(fù) margin 中絕對(duì)值中最大的，然后，和正 margin 值中最大的 margin 相加。
<div style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">A</div> <div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>
示意圖：
4). 相鄰的 margin 要一起參與計(jì)算，不得分步計(jì)算
要注意，相鄰的元素不一定非要是兄弟節(jié)點(diǎn)，父子節(jié)點(diǎn)也可以，即使不是兄弟父子節(jié)點(diǎn)也可以相鄰。
而且，在計(jì)算時(shí)，相鄰的 margin 要一起參與計(jì)算，不得分步計(jì)算。
<div style="margin:50px 0; background-color:green; width:50px;">
<div style="margin:-60px 0;">
<div style="margin:150px 0;">A</div>
</div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px;">
<div style="margin:-120px 0;">
<div style="margin:200px 0;">B</div>
</div>
</div>
錯(cuò)誤的計(jì)算方式：算 A 和 B 之間的 margin，分別算 A 和其父元素的折疊，然后與其父元素的父元素的折疊，這個(gè)值算出來之后，應(yīng)該是 90px。依此法算出 B 的為 80px；然后，A和B折疊，margin 為 90px。
請(qǐng)注意，多個(gè) margin 相鄰折疊成一個(gè) margin，所以計(jì)算的時(shí)候，應(yīng)該取所有相關(guān)的值一起計(jì)算，而不能分開分步來算。
以上例子中，A 和 B 之間的 margin 折疊產(chǎn)生的 margin，是6個(gè)相鄰 margin 折疊的結(jié)果。將其 margin 值分為兩組：
正值：50px，150px，200px
負(fù)值：-60px，-100px，-120px
根據(jù)有正有負(fù)時(shí)的計(jì)算規(guī)則，正值的最大值為 200px，負(fù)值中絕對(duì)值最大的是 -120px，所以，最終折疊后的 margin 應(yīng)該是 200 + (-120) = 80px。
5). 浮動(dòng)元素、inline-block 元素、絕對(duì)定位元素的 margin 不會(huì)和垂直方向上其他元素的 margin 折疊
<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
<div style="margin-top:50px; background-color:gold;">B</div>
</div>
示意圖：
6). 創(chuàng)建了塊級(jí)格式化上下文1的元素，不和它的子元素發(fā)生 margin 折疊
以 “overflow : hidden” 的元素為例：
<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
<div style="margin-top:50px; background-color:gold;">B</div>
</div>
若 B 和它的 "overflow:hidden" 包含塊發(fā)生 margin 折疊的話，金色的條應(yīng)該位于綠色塊的最上方，否則，沒有發(fā)生。
示意圖：
7). 元素自身的 margin-bottom 和 margin-top 相鄰時(shí)也會(huì)折疊
自身 margin-bottom 和 margin-top 相鄰，只能是自身內(nèi)容為空，垂直方向上 border、padding 為 0。
<div style="border:1px solid red; width:100px;">
<div style="margin-top: 100px;margin-bottom: 50px;"></div>
</div>
以上代碼運(yùn)行后，我們講得到的是紅色邊框的正方形，方框的寬高都應(yīng)該是 100px，高度不應(yīng)該是 150px。
