Html CSS边距创建的换行比使用br元素添加额外的像素

由内部包含

br

元素的空段落创建的空间占用的空间与段落上包含内容的空间相同（如预期）

例如：此

div

：

<div style="line-height: 1.3">
  <p>One</p>
  <p>Two</p>
  <p><br></p> <!-- `br` here -->
  <p>Four</p>
  <p>Five</p>
</div>

（即使使用

也会有相同的额外像素）

为了使

div

空间与其他空间相同，我必须从其

边距顶部

（或

高度

）减去一个像素，如下所示：

<div style="line-height: 1.3">
  <p>One</p>
  <p>Two</p>
  <div style="margin-top: calc(1.3em - 1px)"></div>
  <p>Four</p>
  <p>Five</p>
</div>

一个

两个

四

五

---

我的问题是：是什么原因导致CSS创建的空间高度增加了这个像素？

您尝试过不同的浏览器吗？我在我的浏览器（Linux上的Firefox）中尝试过，第一个和第二个div的高度都是168px，第三个div的高度是136！！像素，所以不仅仅是一个像素。我认为这是因为元素也有一个边距，默认情况下div的边距顶部和CSS中p的边距重叠。在我这方面似乎也不错：将字体大小调大一点，以理解这是一个亚像素的渲染和舍入问题，在这种情况下，1em应该是16px。1.3em为16px*1.3=>20.8px。因此，在

行高

和

页边顶部

浏览器将如何选择以20px或21px显示它们之间可能存在一些不一致。试试1.5em，它应该给你16px*1.5=>24px。如果这仍然是一个问题，那就很有趣了。

<div style="line-height: 1.3">
  <p>One</p>
  <p>Two</p>
  <div style="margin-top: 1.3em"></div>
  <p>Four</p>
  <p>Five</p>
</div>

<div style="line-height: 1.3">
  <p>One</p>
  <p>Two</p>
  <div style="margin-top: calc(1.3em - 1px)"></div>
  <p>Four</p>
  <p>Five</p>
</div>