首頁(yè)技術(shù)文章正文

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

更新時(shí)間:2021-09-24 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

外邊距重疊指的是當(dāng)兩個(gè)垂直外邊距相遇時(shí),它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的高度如果都是正邊界,邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界,則在最大的正邊界中減去絕對(duì)值最大的負(fù)邊界。如果沒有正邊界,則從零中減去絕對(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塌陷與合并問題怎么解決?

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

css3畫三角形的方法

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

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

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!