html - 如果行高超过边距，在两条线之间保持指定边距的标准方法是什么？

Question

在工作场所，他们为我提供了这样的线框。

上图说明：行与行之间保持10px的边距，并使用提供的 css 类.font16。

这是 .font16 类的内容：

.font16{
font-size: 16px;
line-height: 22px!important;
}

所以这就是我所做的。

我的代码没有类 font16 ：

<div><div style="margin-bottom:10px;">A quick brown fox</div><div>Junped over the</div></div>

它们之间的边距正好是 10px。

我的类 font16 的代码：

.font16{
font-size:16px;
line-height:22px!important;
}

<div><div class="font16" style="margin-bottom:10px;">A quick brown fox</div><div>Junped over the</div></div>

因此，当我添加 font16 类时，由于行高，行之间的边距似乎增加了。

这是我所做的以确保它们之间仍有 10px 的边距：

.font16{
font-size:16px;
line-height:22px!important;
}

<div><div class="font16" style="margin-bottom:7px;">A quick brown fox</div><div>Jumped over the</div></div>

我在上面的代码片段中使用的计算：我从行高中减去字体大小，即 22px-16px = 6px，即文本上方 3 像素和文本下方 3 像素。所以 10 像素 - 3 像素 = 7 像素。因此给出了 7px 的边距底部，以确保行之间仍有 10px 的边距。

这是我使用的正确方法吗？我正在正确计算行高和边距吗？

注意： 我无法更改 font16 类的值。

score 0 · Accepted Answer

如果我正确地解释了原图，并且小写字母之间需要有 10px 的距离，并且如果打算让两个 div 都有 class font16，那么解决方案如下。只需让 css 为您计算！

.font16{
font-size:16px;
line-height:22px!important;
}

<div>
  <div class="font16" style="margin-bottom:calc(10px + 1ex - 22px);">A quick brown fox</div>
  <div class="font16">Jumped over the</div>
</div>

1 回答 1