CSS - 为什么margin-top会改变父div的margin top？

Question

这是我的html：

<div id="Header">
    <div id="logoContainer">
        <p id="welcome">Welcome</p>
        <h1 class="logoText">first<img id="logoImage" src="image.jpeg" /><span id="second">second</span></h1>
    </div>
</div>

这是我的 CSS：

#Header {
    font-family: consola;
    width: 100%;
    height: 50px;
    background-color: black;
    color: white;
}

#logoContainer {
    height: 50px;
    width: 200px;
    background-color: red;
}

#welcome {
    font-weight: 500;
    font-size: 8px;
    margin-bottom: -6px;
}

#logoImage {
    width: 14px;
    vertical-align: -4px;
    padding-left: 5px;
    padding-right: 5px;
}

.logoText {
    font-size: 12px;
    font-weight: 500;
}


#second {
    font-weight: 500;
}

现在，当我改变时

#logoContainer

到

#logoContainer {
    height: 50px;
    width: 200px;
    background-color: red;
    margin-top: 100px; // add a margin-top of 100px
}

#Header

和

#logoContainer

获得 100px 的上边距

。我该怎么给

#logoContainer

上边距为 100 像素？

Answer 1

完全重新编辑。所以这是垂直边距的处理。

规则 #1 - 当静态或相对显示元素中的两个垂直边距相遇时（例如，正常流中两个块元素之间的底部和顶部边距），两者中较小的一个消失。

规则 #2 - 如果包装父容器没有任何填充或边框，则其上边距和第一个子容器的上边距会发生相同的折叠事情（与最后一个子容器和下边距类似）。较小的消失，较大的取而代之。因此，在没有填充或边框的 DIV 内具有 10px 边距的 P 标签实际上会将父 DIV 标签向下推，就好像父 div 有自己的 10px 上边距一样。如果父 div 有自己的 15px 边距，但没有填充或边框，就好像 P 标签的边距消失了一样。父级上的 1px 内边距或边框，但是将停止此行为，因为两个边距不再相互接触。

IMO，第 1 条规则很棒。您基本上可以拥有一堆内容元素，并且始终确定将观察到更大的空白需求而不会加倍。

另外，IMO，第 2 条规则很臭。它并不像您想象的那样经常出现，但它确实有点令人讨厌，这仍然是我有时只会在某些类型的布局场景中使用顶部或底部边距的原因。

Answer 2

您所遇到的称为margin collapsing。

块的顶部和底部边距有时会合并（折叠） 到单个边距，其大小是组合边距中最大的 进入其中，一种称为边距折叠的行为。

有几种方法可以抵消这种行为，在您的情况下，在父元素周围添加 1px 边框（例如border:1px solid #0f0;）就可以了。

jsFiddle example