HTML中如何插入与指定字号文本等高的空行？

嘿，这个需求其实挺常见的，我给你分享几个实用的实现思路，保证空行高度和你的文本完美匹配：

方法1：用空元素直接匹配高度 #

最简单的方式就是在文本下方加一个空的块级元素，把它的高度设置成和文本字号一致。因为你的文本用了160%的字体大小，我们可以用em单位来同步这个比例：

<span class="fs-font" style="font-size: 160%;">Insert some text here</span>
<!-- 空行元素，高度和文本字号匹配 -->
<div style="height: 1.6em; line-height: 1.6em;">&nbsp;</div>

小提示：里面加 是为了避免部分浏览器忽略空元素的高度，如果你用了CSS明确设置高度，也可以不加，但加上更稳妥。

方法2：用CSS伪元素生成空行 #

不想额外加HTML标签的话，用伪元素是更优雅的选择。给你的文本类添加一个:after伪元素，让它生成一个等高的块级占位：

<style>
.fs-font {
  font-size: 160%;
}
/* 生成等高空行 */
.fs-font::after {
  content: "";
  display: block;
  height: 1em; /* 这里的1em会继承.fs-font的160%字号 */
  /* 如果需要和文本之间留一点点空隙，可以加margin-top: 2px;之类的 */
}
</style>

<span class="fs-font">Insert some text here</span>

这个方法的好处是不用修改HTML结构，所有样式都集中在CSS里，维护起来更方便。

方法3：精准匹配文本实际高度（含行高） #

如果你的文本设置了自定义行高，想要空行完全匹配文本的实际占据高度，可以用calc来计算：

<span class="fs-font" style="font-size: 160%; line-height: 1.3;">Insert some text here</span>
<div style="height: calc(1.6em * 1.3);">&nbsp;</div>

这里1.6em是字号比例，1.3是行高，两者相乘就是文本实际占据的高度，空行高度完全和它对齐。

内容的提问来源于stack exchange，提问作者Naffets