CSS盒模型疑问：相邻div边框间距为何首尾与中间不一致？

问题描述 #

我正在测试CSS基础盒模型的工作机制，但出现了异常结果——第一个和最后一个div的边框与页面边缘的间距为3像素，而相邻div之间的边框间距为4像素。我使用Chrome浏览器打开该HTML文件，通过截图在画图软件中数像素发现此差异，也想知道这种方法是否可靠。

测试代码如下：

CSS代码 #

html {
  background-color: brown;
}

div {
  color: black;
  background-color: white;
  padding: 3px;
  border: solid 1px black;
  margin: 3px;
}

HTML代码 #

<html>
<body>
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<div>div 5</div>
<div>div 6</div>
</body>
</html>

问题分析与解答 #

1. 测量方法的可靠性 #

用画图软件数像素的方法并不可靠，原因如下：

• 浏览器缩放比例（如125%、150%）会让CSS像素与物理像素不一一对应，导致数出的结果偏差
• 高分屏（如Retina屏）中1个CSS像素对应多个物理像素，截图后的像素数无法准确反映实际CSS尺寸
• 正确的测量方式：打开Chrome开发者工具（F12），选中目标元素，查看右侧Elements面板的Box Model视图，可精确查看margin、padding、border的数值；或切换到Computed标签，查看元素的实际布局尺寸。

2. 间距差异的原因 #

你遇到的是**CSS外边距折叠（Margin Collapse）**结合浏览器默认样式导致的视觉差异：

• Chrome浏览器中body元素默认带有margin: 8px，你的代码未重置该样式。第一个div的margin-top: 3px与body的margin-top发生外边距折叠，折叠后的外边距取两者的较大值（8px）。但由于你给html设置了棕色背景，body的margin区域会显示html的背景色，视觉上容易误判div与页面边缘的实际间距。
• 相邻的div元素属于兄弟块级元素，它们的上下margin会自动折叠，所以中间两个div之间的实际间距是3px（而非3px+3px=6px）。如果你数出的是4px，大概率是误将div的1px边框也算入了间距。

如果希望所有div与页面边缘、div之间的间距一致，只需重置body的默认margin即可：

html {
  background-color: brown;
}
body {
  margin: 0; /* 重置body默认margin */
}
div {
  color: black;
  background-color: white;
  padding: 3px;
  border: solid 1px black;
  margin: 3px;
}

内容的提问来源于stack exchange，提问作者Guilherme D'Osualdo