首頁技術文章正文

如何解決margin“塌陷”問題？【前端面試題常問】

更新時間:2021年05月21日11時23分來源:傳智教育瀏覽次數(shù):

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

第一種情況：兩個同級元素，垂直排列，上面的盒子給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;
}

好口碑IT培訓

猜你喜歡：

描述margin的重合問題，并提出你的解決方案

最新資訊