'border' 使 'background-color' 工作不同

Question

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

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

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 页边距没有被属性 'background-color' 着色。在这里我认为'好吧，这是因为它只是 div.header 包含的内容。

但是如果我们删除注释并为 div.header 添加边框，它的行为就会突然变得不同。

现在 h1 和 h2 页边距成为 div.header 的一部分，但边框只是发生了变化。你能帮我解释一下这个现象吗。我知道这有一个合乎逻辑的解释。非常感谢。

Answer 1

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

没有边框，子元素的顶部和底部边距会通过元素的边缘折叠。

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

请参阅 this article 进一步阅读。

'border' 使 'background-color' 工作不同

'border' makes 'background-color' works different

html

css

border

margin