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很臭。它并没有像你想象的那样经常出现，但它确实有点令人讨厌，而且在某些类型的布局场景中我有时只会在顶部或底部使用边距。

Answer 2

您遇到的问题称为margin collapsing。

块的顶部和底部边距有时会合并（折叠）单个保证金，其大小是合并的最大边际进入它，一种称为边缘崩溃的行为。

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

<强> jsFiddle example

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

2 个答案: