解决margin塌陷问题_margin高度塌陷

作者：Monodyee | 2024-02-22 06:46:02

踩

margin高度塌陷

一：什么是margin塌陷？

在标准文档流中，竖直方向（左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin值，这就是margin的塌陷现象。

二：margin塌陷分类？

（1）兄弟盒子之间的塌陷问题。
（2）父子盒子之间的塌陷问题。

三：详细分析

（1）兄弟盒子之间的塌陷问题

比如下面两个盒子模型排列：

<body>
         <div style="width:400px;height:100px;background:#ea8080;margin-bottom:30px;color:#fff;text-align:center;line- height:100px;">层1</div>
         <div style="width:400px;height:100px;background:#f6adad;margin-top:20px;color:#fff;text-align:center; line-height:100px;">层2</div>
 </body>
1
2
3
4

本来我们以为上面的盒子设置了margin-bottom的值，下面的盒子模型中设置了margin-top值，两者之间的距离应该是（30px+20px=50px）,但是结果两都之间的距离是30px如下面的图所示：
在这里插入图片描述

遇到这样的情况，两个兄弟盒子之间的间距应该是按照其中比较大的那个值来取。

解决方案：

在层2那层再包裹一层，设置属性overflow:hidden，这样上下之间的距离就是50px了。代码如下：

         <div style="width:400px;height:100px;background:#ea8080;margin-bottom:30px;color:#fff;text-align:center;line-height:100px;">层1</div>
             <div style="overflow:hidden;">
                     <div style="width:400px;height:100px;background:#f6adad;margin-top:20px;color:#fff;text-align:center;line-                  height:100px;">层2</div>
</div>
1
2
3
4

但是这样的弊端就是改变了HTML结构,在开发中是不能采用的。所以最好的方式是只设置层1的margin-bottom值或是 margin-top值。

（2）父子盒子之间的塌陷问题

比如下面两个盒子模型排列：
父子盒子.jpg

   <style>
       .box1 {
           width: 300px;
           height: 300px;
           background: #ec8180;
       }
       
       .box2 {
           width: 200px;
           height: 200px;
           background: #f7aeaf;
           margin-top: 50px;
       }
   </style>
   
<body>
   <div class="box1">
       <div class="box2">
       </div>
   </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

当给box2层增加样式margin-top:50的时候，并没有看到父盒子与子盒子之间会有间距50px的距离，而是在父盒子上面会发现50px的间距如下图所示：
父子盒子塌陷.jpg

解决方案：

（1）给父元素father添加一个border边框，比如给box1添加样式：border：1px solid transparent这种方式造成贴合的样子；
（2）给父元素添加一个overflow: hidden;
（3）给父元素添加一个position: fixed;
（4）给父元素添加一个display: table;
（5）将子元素都margin改为父元素的padding
（6）给子元素son添加一个兄弟元素属性为content:“”;overflow: hidden;

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/128941

解决margin塌陷问题_margin高度塌陷

一：什么是margin塌陷 ？

二：margin塌陷分类 ？

三：详细分析

一：什么是margin塌陷？

二：margin塌陷分类？