'border'使'background-color'工作不同[重复]答案

【问题标题】：'border' makes 'background-color' works different [duplicate]'border'使'background-color'工作不同[重复]
【发布时间】：2021-06-23 13:16:36
【问题描述】：

这个问题似乎不像其他问题那么重要，但我想了解如何它是如何工作的以及为什么它会这样工作。

我们这里有一个非常简单的代码笔：

html, body {
  margin: 0;
  padding: 0;
}
.header {
  background-color: #ccc;
  /* border: 3px solid pink; */
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test1</title>
</head>
<body>
  <div class="header">
    <h1>Header</h1>
    <h2>Subheader</h2>
  </div>
</body>
</html>

当边框被评论时，笔的工作方式如下：

我们可以看到h1 和h2 边距没有被属性“背景颜色”着色。在这里，我认为'好吧，这是因为它只是 div.header 包含的内容。

但是，如果我们要删除 cmets 并为 div.header 设置边框，它的行为会突然变得不同。

现在 h1 和 h2 边距成为 div.header 的一部分，尽管边框只是改变的地方。你能帮我解释一下这个现象吗？我知道这有一个合乎逻辑的解释。非常感谢。

【问题讨论】：

标签： html css border margin

【解决方案1】：

边框对背景颜色没有任何（直接）影响，它对边距有影响。

如果没有边框，子元素的顶部和底部边距会折叠到元素的边缘。

当您添加边框时，这些边距会停止在边框处，将子元素推离它并增加边框内元素的大小（填充有背景颜色）。

请参阅this article 以进一步阅读。

【讨论】：

正确答案！。我无法投票，因为已达到每日投票上限:(