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

margin“塌陷”有哪些解決方法?

更新時(shí)間:2021-05-21 來(lái)源:黑馬程序員 瀏覽量:

外邊距塌陷共有兩種情況:

第一種情況:兩個(gè)同級(jí)元素,垂直排列,上面的盒子給margin-bottom,下面的盒子給margin-top,那么他們兩個(gè)的間距會(huì)重疊,以大的那個(gè)計(jì)算。

解決這種情況的方法為:兩個(gè)外邊距不同時(shí)出現(xiàn)

第二種情況:兩個(gè)父子元素,內(nèi)部的盒子給margin-top,其父級(jí)也會(huì)受到影響,同時(shí)產(chǎn)生上邊距,父子元素會(huì)進(jìn)行粘連。

解決這種情況的方法為:父級(jí)添加一個(gè)css屬性,overflow: hidden,禁止超出,外邊距重疊就是margin-collapse。

解決方案:

1、為父盒子設(shè)置border,為外層添加border后父子盒子就不是真正意義上的貼合(可以設(shè)置成透明:border:1px solid ansparent);

2、為父盒子添加overflow: hidden;

3、為父盒子設(shè)定padding值;

4、為父盒子添加position: fixed;

5、為父盒子添加 display: table;

6、利用偽元素給父元素的前面添加一個(gè)空元素。


.father::before {
	content:'';
	display:table;
}

1577370495235_學(xué)IT就到黑馬程序員.gif



猜你喜歡:

margin重合問題及解決方式

jQuery的語(yǔ)法有什么特點(diǎn)?

arc()方法繪制圓或弧線操作步驟

黑馬程序員web前端培訓(xùn)課程

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