margin塌陷问题及解决

Posted 2023-05-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了margin塌陷问题及解决相关的知识，希望对你有一定的参考价值。

参考技术A margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。

1. 同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正盒子间距离是较大的那个值。

首先写两个盒子box1，box2并为其设置样式。

效果图如下:

现在对box1设置margin-bottom:20px，对box2设置margin-top：100px;

正常情况下我们会认为两个盒子的间距应该为上下边距相加为120px，但事实并非如此。

由上图清晰可见两个盒子之间的间距为100px，并不是两个盒子上下边距之和，这时我们使用F12打开控制台可见如下图现象：

盒子box1的下边距依然存在，只是不显示了，由此可见边距小的塌陷到了边距值大的值内部，所以间距为box2的边距100px。

2. 父子元素塌陷：父子元素之间也会出现margin塌陷，（1）父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。（2）本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来（父元素的上边距0塌陷到了子元素的上边距50里面）。

效果图如下：

如果我们给box1设置margin-top: 20px，box2设置margin-top: 50px，这时效果如下：

由此可见：父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。

如果我们只给子元素设置margin-top: 50px，这时效果如下：

由此可见：本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来（父元素的上边距0塌陷到了子元素的上边距50里面）。

解决方法：

（1）同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。

（2）父子元素：让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用子元素的margin去设置，而是用父元素的padding挤出来。

注：水平方向没有margin塌陷。

解决margin塌陷和margin合并

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>嘿嘿嘿</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
        
    </head>
    <style type="text/css">
        body{
            background: #f5f5f5;
        }
        .father-box{
            width: 150px;
            height: 150px;
            background-color: black;
            margin: 20px;
        }
        .father-box .son-box{
            width: 50px;
            height: 50px;
            background-color: greenyellow;
            margin: 20px;
        }
        .brother-two{
            width: 150px;
            height: 20px;
            background-color: gold;
            margin: 20px;
        }
    </style>
    <body>
        <div class="father-box brother">
            <div class="son-box">
            
            </div>
        </div>
        <div class="brother brother-two">
            黄色的是20px的高度
        </div>
        
    </body>

</html>