为什么关闭 div 会增加 4px？

在开发网页时，有时我们会遇到关闭 div 后元素间会多出 4px 的情况，这是由于 box-sizing 属性和页面布局模型有关。

盒模型

盒模型描述了一个元素占据的空间，从外到内分为四层，分别是 margin、border、padding 和 content。以下是一个盒模型示意图：

通常浏览器以 content 区域的宽度和高度来计算元素在页面上的空间占据。但在一些情况下，margin 和 border 也会对元素空间占据产生影响。

box-sizing 属性

box-sizing 属性用于指定盒模型的计算方式，有两个取值：

• content-box，默认值，以 content 区域的宽度和高度来计算元素在页面上的空间占据；
• border-box，以 border 区域的宽度和高度来计算元素在页面上的空间占据。

在使用 border-box 计算盒模型时，元素的 width 和 height 属性会包含 border 和 padding 。

为什么关闭 div 会增加 4px

在 HTML 中，不闭合的标签会导致元素嵌套关系混乱，解析器会自动闭合标签，按照最接近的父元素的盒模型计算元素的空间占据。

例如，我们有这样一个页面：

<div style="width: 200px; height: 200px; border: 1px solid red;">
  <div style="width: 100px; height: 100px; border: 1px solid blue;"></div>
</div>

页面结果如下：

这是我们本来想要的页面效果。

但如果我们不小心漏写了闭合标签：

<div style="width: 200px; height: 200px; border: 1px solid red;">
  <div style="width: 100px; height: 100px; border: 1px solid blue;"></div>
</div

浏览器会自动关闭 div 标签，计算子元素宽度和高度时会按照最接近的父元素的盒模型计算。在这个例子中，父元素 border-box 的宽度和高度为 202px （200px + 左右边框 1px），子元素也会计算进去。所以子元素实际上只有 98px 宽和 98px 高，因为 border 和 padding 占据了 2px，所以两个子元素总共会多占用 4px 的宽度和高度。

这就是为什么关闭 div 会增加 4px 的原因。

总结

• 盒模型描述了元素在页面上的空间占据；
• box-sizing 属性用于指定盒模型的计算方式；
• 不闭合标签会导致元素嵌套关系混乱，解析器会自动闭合标签，按照最接近的父元素的盒模型计算元素的空间占据。