1.什么是外邊距重疊
外邊距重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界重合在一起而形成一個單一邊界,外邊距的重疊只產(chǎn)生在普通流的垂直相鄰邊界間帕翻。
如果都是正邊界屏箍,邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界胸哥,則在最大的正邊界中減去絕對值最大的負(fù)邊界涯竟。如果沒有正邊界,則從零中減去絕對值最大的負(fù)邊界空厌。
2.外邊距重疊的圖示
當(dāng)一個元素出現(xiàn)在另一個元素上面時庐船,第一個元素的底邊界與第二個元素的頂邊界發(fā)生疊加
當(dāng)一個元素包含在另一個元素中時,它們的頂和底邊界也發(fā)生疊加
假設(shè)有一個空元素嘲更,它有邊界筐钟,但是沒有邊框或填充。在這種情況下赋朦,頂邊界與底邊界就碰到了一起篓冲,它們會發(fā)生疊加
3.外邊距重疊的意義
當(dāng)我們上下排列一系列規(guī)則的塊級元素時,那么塊元素之間因為外邊距重疊的存在宠哄,段落之間就不會產(chǎn)生雙倍的距離壹将,這樣各處距離就一致了
4.外邊距不重疊的情況
水平margin永遠不會重合
設(shè)置了overflow屬性(visible除外)的元素和它的子元素之間的margin不會重疊
設(shè)置了絕對定位(position:absolute)的盒模型,垂直margin不會被重疊毛嫉,和子元素之間也不重疊
設(shè)置了display:inline-block的元素诽俯,垂直margin不會重疊,和子元素之間也不重疊
根元素(如html)與body的margin不會重疊
5.防止外邊距重疊的方法
元素絕對定位postion:absolute;一般用在內(nèi)層元素
內(nèi)層元素加float:left;或display:inline-block;
外層元素用padding增加邊距
外層元素設(shè)置overflow:hidden;
內(nèi)層元素透明邊框border:1px solid transparent;
6.參考文獻
www.hujuntao.com/web/css/css-margin-overlap.html" CSS外邊距(margin)重疊及防止方法
http://developer.51cto.com/art/201008/221940CSS中margin邊界疊加問題及解決方案
http://www.reibang.com/p/265fb9f0de97" CSS2速查表- BFC與邊距重疊詳解