为什么我的子html元素的边距在父元素之外答案

【问题标题】：Why is the margin of my child html element outside the parent为什么我的子html元素的边距在父元素之外
【发布时间】：2015-11-18 08:53:36
【问题描述】：

我在父 div 中有一个子元素（在我的示例中为 h1）。

为什么孩子的边距似乎在父母之外。

下面的例子：

孩子有 30px 的内边距和预期的红色边框。 div 有一个黄色背景，但我希望它的高度为 100 + 30 + h1 + 30 + 100。

div {
    background-color: yellow;
}

h1 {
    margin: 100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

有趣的是，如果我像下面的示例那样在 div 周围设置边框 - 它的行为符合我的预期。我知道我可以解决这个问题，但我想知道发生了什么？

div {
    background-color: yellow;
    border: 5px solid green;
}

h1 {
    margin: 100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

这是“边距崩溃”，乍一看可能令人困惑。

【讨论】：

【解决方案2】：

这可以通过在 div 或 h1 上应用display: inline-block 来修复。但是，在这种情况下，我强烈建议在 div 上使用padding，这样可以永久解决问题。

【讨论】：

【解决方案3】：

空块：如果没有边框、内边距、内嵌内容、高度、或 min-height 将块的 margin-top 与其 margin-bottom 分开，然后它的顶部和底部边距折叠。 Ref

您可以使用outline css 属性来实现一致的行为。

div {
    background-color: yellow;
    outline: 5px solid green;
}

h1 {
    margin: 100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

【讨论】：

【解决方案4】：

当你设置边界时，意味着你告诉 DIV 容器它是边界。

您必须指定宽度和浮动。

float: left;
width: 100%;

现在 DIV 从顶部开始。但从中间显示背景。

【讨论】：

【解决方案5】：

div {
    background-color: yellow;
    padding:100px;
}

h1 {
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

或者这个

div {
    background-color: yellow;
    padding:1px;
}

h1 {
    margin:100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

【讨论】：