前端面試題：如何解決Margin“塌陷”？
作者：NativeBase
在CSS中，Margin“塌陷”是指元素的Margin屬性設(shè)置過(guò)高，導(dǎo)致它們超出其容器的邊界。這會(huì)影響布局和可訪問(wèn)性。
外邊距塌陷共有兩種情況：
第一種情況：
兩個(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)行粘連。
解決方案：
1、為父盒子設(shè)置 border，添加 border 后父子盒子就不是真正意義上的貼合（可以設(shè)置成透
明：border：1px solid transparent）；
2、為父盒子添加 overflow：hidden；
3、為父盒子設(shè)定 padding 值；
4、為父盒子添加 position：fixed；
5、為父盒子添加 display：table；
6、利用偽元素給父元素的前面添加一個(gè)空元素
.father::before { content:''; display:table; }其他
在CSS中，margin“塌陷”是指元素的margin屬性設(shè)置過(guò)高，導(dǎo)致它們超出其容器的邊界。這會(huì)影響布局和可訪問(wèn)性。下面是幾種可以避免或解決margin塌陷問(wèn)題的方法：
使用box-sizing屬性：
將元素的box-sizing屬性設(shè)置為border-box，這將確保元素的寬度和高度包括在元素的內(nèi)容中，而不是額外的margin。例如：
.box {
box-sizing: border-box;
}合理設(shè)置margin屬性：
將元素的margin設(shè)置為恰當(dāng)?shù)闹?，可以避免margin塌陷問(wèn)題。通常情況下，我們可以將margin設(shè)置為較小的值，并在需要時(shí)根據(jù)需要調(diào)整它們。例如：
.box {
margin: 20px;
}合理設(shè)置盒模型：
在某些情況下，將元素的盒模型設(shè)置為object，這可以消除某些CSS盒模型帶來(lái)的margin塌陷問(wèn)題。例如：
.box {
width: 200px;
height: 200px;
border: 1px solid black;
display: inline-block;
overflow: hidden;
}
.box.object {
margin: 0;
}調(diào)整元素的位置：
通過(guò)調(diào)整元素的位置，可以避免margin塌陷問(wèn)題。例如：
.box {
position: relative;
}
.box:before,
.box:after {
content: '';
display: inline-block;
}
.box:before {
position: absolute;
top: -20px; /\* 或者根據(jù)需要調(diào)整 \*/
left: 0; /\* 或者根據(jù)需要調(diào)整 \*/
right: 0; /\* 或者根據(jù)需要調(diào)整 \*/
bottom: 0; /\* 或者根據(jù)需要調(diào)整 \*/
}
.box:after {
content: '';
position: absolute;
top: 0; /\* 或者根據(jù)需要調(diào)整 \*/
left: 20px; /\* 或者根據(jù)需要調(diào)整 \*/
right: 0; /\* 或者根據(jù)需要調(diào)整 \*/
}責(zé)任編輯：姜華
來(lái)源：
今日頭條
