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

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

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

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

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

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

外邊距不重疊的情況

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

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

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

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

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

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

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

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

·外層元素用padding增加邊距

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

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

猜你喜歡：

margin塌陷與合并問(wèn)題怎么解決？

如何使一個(gè)盒子水平垂直居中？

css3畫三角形的方法

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

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