div内h1元素的边距答案

【问题标题】：margin on h1 element inside a divdiv内h1元素的边距
【发布时间】：2014-01-23 00:05:29
【问题描述】：

我有一个 div 容器，里面有一个 h1 元素：

<div id="header">
 <h1>Enlighten Designs</h1>
</div>

我已经对页眉元素应用了一个 margin-top、一个 margin-left 和一个 margin-right。但是，margin-top 并未应用于包含 div 的标题元素框。相反，上边距被应用于包含的 div。标题的左右边距正在应用于包含 div 的标题元素框。

div和header的样式规则如下：

#header {
    background: blue;
    height: 150px;
}
h1{
    background: orange;
    margin-top:30px;
    margin-left: 10px;
    margin-right: 10px;
}

这种行为的原因是什么？

【问题讨论】：

你为什么不给#headermargin-bottom:30px;？
作为一个离题的旁注 - 在 HTML5 中，您可以只使用 <header> 而不是滥用 div。

标签： html css margins

【解决方案1】：

您的“问题”是 CSS 中的边距会相互折叠。

Read this awesome article explaining the concept，管理总结：

简单来说，这个定义表明当垂直两个元素的边距是接触的，只有元素的边距保证金值最大的将被兑现，而保证金值最大的将被兑现。边距值较小的元素将被折叠为零。

在您的情况下，请仔细阅读“父子元素之间的折叠边距”部分以下几页。在您的情况下，following CSS 2.1 rule 适用：

流入块元素的上边距与其第一个元素一起折叠如果元素没有顶部，则流入块级子级的上边距边框，没有顶部填充，孩子没有间隙。

【讨论】：

【解决方案2】：

嗯，解决方案是将overflow: hidden; 属性添加到您的标题元素中。
Here JsFiddle.

【讨论】：

【解决方案3】：

#header {
    background: blue;
    height: 150px;
    position:absolute;
}
h1{
    background: orange;
    margin-top:30px;
    margin-left: 10px;
    margin-right: 10px;
    position:relative;
}

【讨论】：

使用绝对定位几乎不是一个解决方案，因为在手头的实际情况下，这不太可能是预期的行为。