CSS中如何解決外邊距塌陷問題

首先我們先看出現(xiàn)外邊距塌陷的三種情況:
1.當(dāng)上下相鄰的兩個塊級元素相遇,上面的元素有下邊距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.對于兩個嵌套關(guān)系的塊元素,如果父元素沒有上內(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的最大值。
到此這篇關(guān)于CSS中如何解決外邊距塌陷問題的文章就介紹到這了,更多相關(guān)CSS外邊距塌陷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
詳解overflow:hidden的作用(溢出隱藏、清除浮動、解決外邊距塌陷)
overflow:hidden是當(dāng)元素內(nèi)的內(nèi)容溢出的時候使它隱藏溢出的部分,即超出部分隱藏。本文介紹了幾種用法,具有一定的參考價值,感興趣的可以了解一下2021-07-01- margin-top塌陷是在CSS的盒子模型中出現(xiàn)的一種現(xiàn)象,本文就介紹了CSS中外邊距塌陷的八種解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)2023-05-31