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

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

第一種情況：兩個(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;
}

猜你喜歡：

margin重合問題及解決方式

jQuery的語法有什么特點(diǎn)？

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

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