首頁技術(shù)文章正文

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

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

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

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

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

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

解決這種情況的方法為：父級添加一個(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;
}

好口碑IT培訓(xùn)

猜你喜歡：

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

上一篇：textarea控件創(chuàng)建文本輸入框 下一篇：Javascript創(chuàng)建對象的方式有哪些？

最新資訊