css 边框完全改变 div 大小？

Question

编辑：找到了一个很好的链接，解释了所有关于边界折叠的内容：

用例子解释边界折叠

编辑结束。享受 ：）

我无法理解这一点......为什么在我的 div 上应用 1px 纯黑色边框会大大改变 div 的大小？（没有边框我可以看到一条相对较细的线作为我的背景颜色，有边框的背景颜色的矩形要宽得多，见图片）这张照片是没有应用边框的： 现在看看这张照片（唯一的区别是边框......）

有人可以解释一下边框如何对 div 大小产生如此大的影响/这里到底发生了什么？！

风格：

#header {
background-color: yellow;
color: white;
text-align: center;
border: 1px solid black;
}

这是一个小提琴，所以你可以玩： 我的小提琴 非常 感谢，吉米。

Answer 1

那是因为边距崩溃。

边距不是元素本身的一部分，它是元素与周围元素之间的距离，或者元素与包含边框或填充之间的距离。

在第一张图片中，标题元素的边距（h1也许是？）在 div 外折叠。边距不会影响 div 的大小，而是将周围的元素推开。

当您向 div 添加边框时，标题元素的边距会将边框推离标题元素，而不是将周围元素推开。header 元素的边距决定了 div 的大小。