解决margin塌陷问题

M-Codes

已于 2022-04-27 19:37:19 修改

阅读量2k

点赞数 2

分类专栏：前端文章标签： javascript

于 2022-04-07 21:54:21 首次发布

本文链接：https://blog.csdn.net/efew212efe/article/details/124027586

版权

前端专栏收录该内容

22 篇文章 11 订阅

订阅专栏

一：什么是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>

本来我们以为上面的盒子设置了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>

但是这样的弊端就是改变了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>

当给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;

M-Codes

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
解决margin塌陷问题

day1记录----解决margin塌陷问题同级元素的塌陷当上下连个div，上面的div设置了margin-bottom:100px,下面的div设置了margin-top:100px,我们知道正常情况下，上下两个div距离200px。但是实际只有100px，这就是因为margin塌陷解决方案我们可以在任意一个div的外面嵌套一个div，给他一个样式class，添加一个属性为:overflow:hidden,这就是BFC—块级格式化上下，能够很好的解决margin塌陷...
复制链接

扫一扫