时间戳

首页 > 解决方案 > 由 CSS 边距创建的换行符比使用 br 元素添加了一个额外的像素

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 style="line-height: 1.3">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
</div>

但是，如果我不br使用元素，而是使用div与 amargin-top大小相同的a line-height，则由 创造的空间将比div其对应物高一个像素。

这与最后两个的高度不同div：

<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="height: 1.3em"></div>也会有相同的额外像素）。

为了使div空间与其他空间相同，我必须从其margin-top（或height）中减去一个像素，如下所示：

<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 创建的空间高度中的这个额外像素？

标签： htmlcss

解决方案

推荐阅读