两个嵌套的Div,内部Div的margin-top失效

青旅半醒 2022-06-03 10:11 205阅读 0赞

对内部的div设置margin-top时，内部对于外部的div并没有产生一个margin值，而是外部的div相对于上面的div产生了一个margin值。

实例如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> body { margin: 0; padding: 0; background: blue; } #a { width: 200px; height: 200px; background: #e2e2e2; } #b { height: 100px; width: 100px; margin-top: 50px; background: black; color: red; } </style>
    </head>
    <body>
        <div id="a">
            <div id="b"></div>
        </div>
    </body>
    </html>

效果图如下：  
![这里写图片描述][SouthEast]

从以上效果图中可以看出，我们对 div\#b 设置的 margin-top 属性没有生效，而外层 div\#a 却多了个 margin-top 的效果。

这是因为嵌套div中margin-top出现转移，在部分浏览器中(目前在 IE8, chrome60.0, firefox57.0.2 这几个版本的浏览器上测试，是这样的效果，其他版本目前没有测试)，两个嵌套的div，如果外层父元素div的padding值为0，那么内层div的margin-top值会转移到父元素也就是外层div身上。

解决方案：  
方案1.给父元素div1设置一个padding-top值

#a { width: 200px; height: 200px; background: #e2e2e2; padding-top: 1px; }

正常的效果图如下：  
![这里写图片描述][SouthEast 1]

方案2.  
给父元素div1设置一个overflow：hidden；在不加overflow:hidden;的时候，margin-top:这个属性是认不到边的，也就是失效。除了 hidden 属性外，其他以下几个属性也是可以的：

> overflow: hidden | auto | overlay | scroll

#a { width: 200px; height: 200px; background: #e2e2e2; overflow: hidden; }

方案3.  
让父元素生成一个块级格式化范围（[BFC][]）  
一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个：

> float的值不为none  
> position的值不为static或者relative  
> display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个  
> overflow的值不为visible

display中还有一些其他的属性值也是可以的,比如 table|inline-table|inline-flex 等等

[SouthEast]: /images/20220603/e8e39aa384574abb909be15b2d3f403d.png
[SouthEast 1]: /images/20220603/f6472877e8824086a9d65b971379bcf0.png
[BFC]: http://blog.sina.com.cn/s/blog_48422a050100tkig.html