CSS中如何解決外邊距塌陷問題
發(fā)布時間：2020-05-11 11:45:43 作者：Angus安格斯 
我要評論
我要評論這篇文章主要介紹了CSS中如何解決外邊距塌陷問題,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
首先我們先看出現(xiàn)外邊距塌陷的三種情況：
1.當上下相鄰的兩個塊級元素相遇，上面的元素有下邊距margin-bottom，下面的元素有上邊距margin-top，則它們之間的垂直距離取兩個值中的較大者。
<style>
.box1 {
width: 150px;
height: 100px;
margin-bottom: 20px;
background-color: rgb(201, 239, 98);
}
.box2 {
width: 100px;
height: 100px;
background-color: rebeccapurple;
margin-top: 10px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
這時候兩個盒子之間的垂直距離不是30px，而是20px。
解決方法：
盡量只給一個盒子添加margin值
2.對于兩個嵌套關系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，父元素的上外邊距會與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者。
<style>
.box1 {
width: 150px;
height: 100px;
margin-top: 20px;
/* border: 1px solid #000000; */
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
/* border: 1px solid #000000; */
background-color: rebeccapurple;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
這時候兩個盒子會發(fā)生合并，上外邊距為20px。
解決辦法：
①給父元素定義上邊框
②給父元素定義上內(nèi)邊距
③給父元素添加 overflow：hidden；
④添加浮動
⑤添加絕對定位
3.如果存在一個空的塊級元素，border、padding、inline content、height、min-height都不存在，那么上下邊距中間將沒有任何阻隔，上下外邊距將會合并。
<p style="margin-bottom: 0px;">這個段落的和下面段落的距離將為20px</p> <div style="margin-top: 20px; margin-bottom: 20px;"></div> <p style="margin-top: 0px;">這個段落的和上面段落的距離將為20px</p>
可以理解成中間div寬度為0且上下邊距融合，只取margin的最大值。
到此這篇關于CSS中如何解決外邊距塌陷問題的文章就介紹到這了,更多相關CSS外邊距塌陷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
詳解overflow:hidden的作用(溢出隱藏、清除浮動、解決外邊距塌陷)
overflow:hidden是當元素內(nèi)的內(nèi)容溢出的時候使它隱藏溢出的部分，即超出部分隱藏。本文介紹了幾種用法，具有一定的參考價值，感興趣的可以了解一下2021-07-01
margin-top塌陷是在CSS的盒子模型中出現(xiàn)的一種現(xiàn)象，本文就介紹了CSS中外邊距塌陷的八種解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學2023-05-31