css中 “”margin-top“” 导致子标签绑架父标签的问题

现象：

当两个空的块级元素嵌套时，如果内部的块元素设置有margin-top属性时，而且父元素没有下边解决方法所述的特征，那么内部块元素的margin-top属性就会绑架父元素(即---将margin-top传递并凌驾给了父元素)。

比喻：

比作一个小兵，看到上级有漏洞，就假传圣旨，利用漏洞扩张自己的权利。只要给父元素设置border(栅栏)或者padding(隔离墙)，就能管住这个调皮的下属。

代码：

<style>
    .parent{
        width:500px;
        height:300px;
        background:teal;
    }
        .box{
            width:100px;;
            height:100px;
            background:aqua;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="box">

        </div>
    </div>
</body>

测试结果：大家可以看到，父元素并没有设置margin-top，但是显示的结果说明父元素应用了子元素的margin-top的值，这就是子标签绑架父标签。

解决方法：

1.设置父元素或者自身的display：inline-block；

.parent{
        width:500px;
        height:300px;
        background:teal;
        display: inline-block;
    }

图片A：这样就解决了这种问题

2.设置父元素的border:1px solid aqua;

.parent{
        width:500px;
        height:300px;
        background:teal;
        border:1px solid  aqua;
    }

见图片A

3.设置父元素的padding:1px;

 .parent{
        width:500px;
        height:300px;
        background:teal;
        padding:1px;
    }

见图片A

4.给父元素设置overflow:hidden;

 .parent{
        width:500px;
        height:300px;
        background:teal;
        overflow:hidden;
    }

见图片A

5.给父元素或者自身设置position:absolute;

        .box{
            width:100px;;
            height:100px;
            background:aqua;
            margin-top: 50px;
            position:absolute;
        }

见图片A

综述：这个现象并不是bug,而是有理论依据的：

<<on having layout>>小编建议在空闲时可以阅读一下。

hasLayout (Windows Internet Explorer渲染引擎的一个内部组成部分)会影响一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么他的上边距应该和其文档流中的第一个孩子元素的上边距重叠。但值得一提的是，只有在FF和Chrome这两种浏览器下才会出现这种margin-top绑架父节点的情况，在 IE6 IE7 中均显示正常(读者可以去试一下)。但这恰恰说明了他们是不符合规范的，而FF和Chrome这两种浏览器则是严格遵守规范的。

css中 “”margin-top“” 导致子标签绑架父标签的问题

猜你喜欢