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

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

保证金最高100px？

Answer 1

总重新编辑.所以这是垂直边距的交易.

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

规则#2 - 如果包装父容器没有任何填充或边框,则相同的崩溃事物会发生在其上边距和第一个孩子的上边距(与上一个子边距和下边距相似).较小的一个消失,较大的一个取代它.因此,在DIV内部没有填充或边界的10px边距的P标记实际上会将父DIV标记向下推,就像父div具有其自己的10px上边距一样.如果父div有自己的15px边距但没有填充或边框,那就好像P标签的边距已经消失了.父节点上的1px填充或边框,但会停止此行为,因为两个边距不再相互接触.

IMO,规则#1很棒.您基本上可以拥有一堆内容元素,并始终确保在不增加任何内容的情况下观察到更大的空白需求.

IMO,规则#2也很臭.它并没有像你想象的那样频繁出现,但它确实有点令人讨厌,而且在某些类型的布局场景中我有时只会在顶部或底部使用边距.