CSS中出现外边距塌陷如何解决?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
首先我们先看出现外边距塌陷的三种情况:
1。当上下相邻的两个块级元素相遇,上面的元素有下边距margin-bottom、下面的元素有上边距margin-top,则它们之间的垂直距离取两个值中的较大者。
& lt; style>
.box1 {才能
,,,,宽度:,150 px;
,,,,身高:,100 px;
,,,,margin-bottom:, 20 px;
,,,,背景颜色:,rgb (201,, 239,, 98);
,,}
.box2 {才能
,,,,宽度:,100 px;
,,,,身高:,100 px;
,,,,背景颜色:,rebeccapurple;
,,,,margin-top:, 10 px;
,,}
& lt;/style>
,,& lt; div 类=癰ox1"祝辞& lt;/div>
,,& lt; div 类=癰ox2"祝辞& lt;/div> 这时候两个盒子之间的垂直距离不是30 px,而是20 px。
解决方法:
尽量只给一个盒子添加利润值
2。对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者。
& lt; style>
,,,,,,,.box1 {
,,,,,,,,,,,宽度:,150 px;
,,,,,,,,,,,身高:,100 px;
,,,,,,,,,,,margin-top:, 20 px;,
,,,,,,,,,,,/*,边界:,1 px solid # 000000; */,,,,,,,,,,,,背景颜色:红色;
,,,,,,,}
,,,,,,,.box2 {
,,,,,,,,,,,宽度:,100 px;
,,,,,,,,,,,身高:,100 px;
,,,,,,,,,,,/*,边界:,1 px solid # 000000; */,,,,,,,,,,,背景颜色:,rebeccapurple;
,,,,,,,,,,,margin-top:, 10 px;
,,,,,,,}
,,,& lt;/style>
& lt;/head>
& lt; body>
,,,& lt; div 类=癰ox1"比;
,,,,,,,& lt; div 类=癰ox2"祝辞& lt;/div>
,,,& lt;/div>
& lt;/body> 这时候两个盒子会发生合并,上外边距为20 px。
解决办法:
①给父元素定义上边框
②给父元素定义上内边距
③给父元素添加溢出:隐藏。
④添加浮动
⑤添加绝对定位
3。如果存在一个空的块级元素,边境,填充、内联内容,高度,最小高度都不存在,那么上下边距中间将没有任何阻隔,上下外边距将会合并。
& lt; p 风格=癿argin-bottom:, 0 px;“在这个段落的和下面段落的距离将为20 px
& lt; div 风格=癿argin-top:, 20 px;, margin-bottom:, 20 px;“祝辞& lt;/div>
& lt; p 风格=癿argin-top:, 0 px;“在这个段落的和上面段落的距离将为20 px 可以理解成中间div宽度为0且上下边距融合,只取利润的最大值。
看完上述内容,你们掌握CSS中出现外边距塌陷如何解决的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
