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

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

第一種情況：兩個同級元素，垂直排列，上面的盒子給margin-bottom，下面的盒子給margin-top，那么他們兩個的間距會重疊，以大的那個計算。

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

第二種情況：兩個父子元素，內部的盒子給margin-top，其父級也會受到影響，同時產生上邊距，父子元素會進行粘連。

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

解決方案：

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

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

3、為父盒子設定padding值;

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

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

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

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

猜你喜歡：

margin重合問題及解決方式

jQuery的語法有什么特點？

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

黑馬程序員web前端培訓課程