Question

h1 {
    background-color: yellow;
}

.warning {
    background-color: black;
    color: red;
}

.warning h2 {
    margin: 100px 0;
}

p {
    background-color: cyan;
}

<h1>LA Fitness</h1>
  <div class='warning'>
    <h2>This is a heading</h2>
    Warning
  </div>
<p>I am a paragraph</p>

在上面的示例中，“这是一个标题”和“LA Fitness”之间有一个很大的空间，.warning（黑色）的背景不会出现在背景中。

但是如果我添加一个边框或一些填充，.warning背景会延伸到下方。为什么仅在添加边框或填充.warning？

时才会发生这种情况

h1 {
    background-color: yellow;
}

.warning {
    background-color: black;
    color: red;
    padding: 1px;
}

.warning h2 {
    margin: 100px 0;
}

p {
    background-color: cyan;
}

<h1>LA Fitness</h1>
<div class='warning'>
    <h2>This is a heading</h2>
    Warning
</div>
<p>I am a paragraph</p>

Answer 1

margin是＆＃34;外边距＆＃34;：它不仅位于内容区域之外，还位于由背景填充的区域之外。 padding然而在背景区域内，是一种＆＃34;内边距＆＃34;。

我在您的示例中向padding-top: 100px添加了.warning，这说明了我上面写的内容。其上方的剩余白色区域是其上方h1的下边距。

Google for＆＃34; box model＆＃34;进一步解释这个......

＆＃13;

h1 {
    background-color: yellow;
}
.warning {
    background-color: black;
    color: red;
    padding-top: 100px;
}
.warning h2 {
    margin: 100px 0;
}
p {
    background-color: cyan;
}

＆＃13;

<h1>LA Fitness</h1>
<div class='warning'>
  <h2>This is a heading</h2>
  Warning
  </div>
<p>I am a paragraph</p>

＆＃13;

Answer 2

这就是所谓的＆＃34;保证金崩溃。＆＃34; https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

如果没有边框，填充，内联内容，block_formatting_context创建或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，分钟-height或max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

Answer 3

问题在于警告div中的h2标记：

<h2>This is a heading</h2>

它的上边距为100px。如果父级有填充，则从父级填充之后计算边距（第二个样本）。用另一种方式填充父母的边界边缘。

但是如果父级没有填充边距超出其父级并且与前一个元素的距离为100px。

CSS背景仅在应用边框或填充时延伸

3 个答案: