子类设置margin-top无效

最新推荐文章于 2023-07-31 15:56:49 发布

苏金标

最新推荐文章于 2023-07-31 15:56:49 发布

阅读量463

点赞数

分类专栏：前端常见问题

本文链接：https://blog.csdn.net/xueyoubangbang/article/details/90480837

版权

前端常见问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

做一个效果

  <div class="head" style="background-color: chartreuse">
        <div class="logo" style="background-color: darkblue">
            <a href="http://www.baidu.com">
                <img src="img/logo_h.png" />
            </a>
        </div>
    </div>

.head {
    height: 69px;
    background: #ffffff;
    overflow: hidden;
    text-align: center;
}

.head .logo {
    width: 133px;
    margin-top: 20px;
}

上面的代码大家估计都看的懂，需要显示的效果图如下

但实际如下

我擦，这是搞啥鬼，子类没有效果，父类向下偏移了，这是啥原因呢？

解释：

这是因为父元素和子元素的margin发生了和并，父元素的margin是0px，子元素的margin是10px，所以合并后的margin是10px，且加在了父元素上，于是出现了图2的效果。在CSS2.1中对盒模型有如下规定：在垂直方向上，所有毗邻的两个或多个盒元素的margin将会合并。毗邻的意思是：同级或嵌套的盒元素，并且它们之间没有非空内容、padding或border。

合并后的margin的大小取两个发生合并的元素中margin较大的那一个。

更详细的讲，分为几种情况：

1.两个元素为同级元素，即当一个元素出现在另一个元素上面时，第一个元素的margin-bottom与第二个元素的margin-top发生合并，合并后的margin值是margin-bottom和margin-top中较大的那一个

2.当两个元素嵌套，即一个元素包含在另一个元素中时（假设没有padding或border把两个元素的margin分隔开），它们的margin-bottom和/或margin-top也会发生合并，合并后的margin值同样也是margin-bottom和margin-top中较大的那一个；该问题就属于这一种情况。

3.假设有一个空元素，且不设置它的宽高，它有margin-bottom和margin-top，但是没有padding或border。在这种情况下，margin-bottom和margin-top就碰到了一起，它们也会发生合并，合并后的margin值同样也是margin-bottom和margin-top中较大的那一个。
如果这个外边距遇到另一个元素的外边距，它还会发生合并。