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

最新推荐文章于 2021-06-25 11:03:21 发布

原创最新推荐文章于 2021-06-25 11:03:21 发布 · 4.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#嵌套 #margin-top #失效 #css #html

css 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在CSS布局中，当一个div嵌套在另一个div中且外层div的padding值为0时，内层div的margin-top值会转移到外层div的现象。并提供了三种解决此问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对内部的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>

效果图如下：
这里写图片描述

从以上效果图中可以看出，我们对 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;
        }

正常的效果图如下：
这里写图片描述

方案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 等等