什么是外邊距重疊?如何解決外邊距重疊?

外邊距重疊指的是當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的高度如果都是正邊界，邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界，則在最大的正邊界中減去絕對值最大的負(fù)邊界。如果沒有正邊界，則從零中減去絕對值最大的負(fù)邊界。只有外邊距才可以是負(fù)值，內(nèi)邊距不允許為負(fù)值。

什么情況下外邊距會出現(xiàn)重疊情況?

1、兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值

2、兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值

3、兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和

外邊距不重疊的情況

·水平margin永遠(yuǎn)不會重合

·設(shè)置了overflow屬性(visible除外)的元素和它的子元素之間的margin不會重疊

·設(shè)置了絕對定位(position:absolute)的盒模型，垂直margin不會被重疊，和子元素之間也不重疊

·設(shè)置了display:inline-block的元素，垂直margin不會重疊，和子元素之間也不重疊

·根元素(如html)與body的margin不會重疊

防止外邊距重疊方法有哪些?

·元素絕對定位postion:absolute;一般用在內(nèi)層元素

·內(nèi)層元素加float:left;或display:inline-block;

·外層元素用padding增加邊距

·外層元素設(shè)置overflow:hidden;

·內(nèi)層元素透明邊框border:1px solid transparent;

猜你喜歡：

margin塌陷與合并問題怎么解決？

如何使一個盒子水平垂直居中？

css3畫三角形的方法

CSS中px、em、rem有什么區(qū)別和不同？

黑馬程序員HTML&JS+前端高手班