Html CSS背景仅在应用边框或填充时扩展

h1{
背景颜色：黄色；
}
.警告{
背景色：黑色；
颜色：红色；
}
.警告h2{
利润率：100px0；
}
p{
背景色：青色；
}

LA健身
这是一个标题
警告
我是一个段落

该

页边距

是一个“外部页边距”：它不仅在内容区域之外，而且在背景填充的区域之外<代码>填充但是位于背景区域内，有点像“内边距”

在您的示例中，我将

padding top:100px

添加到

.warning

，这演示了我上面写的内容。其上方剩余的白色区域是其上方的

h1

的底边

谷歌的“盒子模型”得到进一步的解释

h1{
背景颜色：黄色；
}
.警告{
背景色：黑色；
颜色：红色；
填充顶部：100px；
}
.警告h2{
利润率：100px0；
}
p{
背景色：青色；
}

LA健身
这是一个标题
警告
我是一段

这就是所谓的“利润崩溃”

如果没有创建边框、填充、内联内容、块\u格式\u上下文或清除以将块的页边距顶部与其第一个子块的页边距顶部分开，或者没有边框、填充、内联内容、高度、最小高度或最大高度以将块的页边距底部与其最后一个子块的页边距底部分开，然后这些利润率就会崩溃。折叠的页边距最终位于父页边距之外

---

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

<h2>This is a heading</h2>

这是一个标题

它有一个100像素的边缘顶部。如果其父项有填充，则从其父项（第二个示例）的填充之后开始计算边距。另一方面，父对象的填充围绕子对象的边界

但如果父元素没有填充边距，则会超出父元素，并与上一个元素保持100px的距离