Question

我希望h1和span之间的间距为30px。它应该是30px到h1字母顶部的字母底部的span，h1位于30px下面，这里是h1的间距应为（蓝框表示间距）：

我的span和line-height有一些border。我围绕它做了一个line-height，因此可以看到margin-bottom。如果我现在将30px h1设置为h1，它看起来像这样：

间距从span元素的末尾开始，到line-height元素的开头结束。 line-height位于元素的开头/结尾和字母之间。因此，间距也包含30px，而且不完全是margin-bottom。什么是解决这个问题的最佳方法？我知道，我可以这样设置margin-bottom: 30px - [LINE-HEIGHT];：30px但是我怎么知道两个红色框（线高）是多少才能正确地减去它以便间距变得准确h1 { font-family: Arial; font-size: 45px; line-height: 54px; letter-spacing: 0; color: darkred; border: 1px solid black; margin: 0 0 30px; } span { font-family: Arial; font-size: 30px; line-height: 39px; letter-spacing: 0; color: gray; border: 1px solid black; }？

＆＃13;

<h1>Default main title</h1>
<span>Proin eget tortor risus. Vivamus magna justo, lacinia</span>

＆＃13;

{{1}}

＆＃13;

这是我的代码集示例：https://codepen.io/STWebtastic/pen/QarjJO

我希望这很清楚。

Answer 1

嗯，这不是互联网排版的工作原理。

设置line-height:100%; margin:0; padding:0;和box-sizing:border-box;（因此边框未添加到高度）会让你更接近。

但真正的问题是，在浏览器中，行高包括为下行器保留的间距（想想 q，j，g 的底部部分）和上升部分。加上一些我无法解释的额外位。我不是设计师，更不是字体专家。

因此，实际实现您所寻找的内容的唯一方法是将魔术数字（从试验和错误中获得的数字）调整到比实际字体大小更低的值。正确的值通常在68-70％的范围内，但是对于任何字体大小都没有公式有效，更不用说任何字体了。

＆＃13;

body {
  font-family: Arial;
}
*{
box-sizing:border-box;
}


h1 {
  font-size: 45px;
  line-height:31px;
  letter-spacing: 0;
  color: darkred;
  border: 1px solid black;
  margin: 0 0 30px;
}

p {
  font-size: 30px;
  line-height:21px;
  color: gray;
}


h1, p{
  padding:0;
  margin:30px 0;
  border: 1px solid black;
}

＆＃13;

<h1>Default qgj main Title</h1>

<p>Proin eget tortor risus. Vivamus magna justo, </p>

＆＃13;

当然，这是非常脆弱的，容易出问题。因此，实现有点类似的最佳选择是继续在边距中使用幻数。

有一些公式可以让你的猜测更容易，但它们实际上取决于你选择的字体，字体大小等。再次，魔术数字。

Answer 2

我认为你应该首先阅读：https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

如您所见，字体本身具有一定的线条高度（字符和底部边框之间的空白区域）。因此，如果您设置font-size: 45px和line-height:45px，仍然会有一个空白区域（在您的小提琴中尝试并检查元素是否有证据）。它必须如何通过em-square呈现字体，这不是成比例的。

您可以选择包含使用整个em-square的字符的字体。但我不知道找到这个有多容易......

据我所知，你能做的最好的事情确实就是建议：试验和错误，直到你得到30px。

Answer 3

某些字符（例如小写字母j或g）具有“下降”字符。因此，您的问题一开始就存在缺陷，因为您似乎没有考虑那些属于字体高度的下降器。

Answer 4

为简化问题，您要问：我如何确保h1元素的baseline与{{1}的cap line之间存在30px的空间}} 在它下面？

看起来GitHub上有一个名为cap-height的漂亮项目，只要您使用Web Font Loader加载字体，就可以帮助您解决这个问题。

您可以计算span和h1的上限，设置各自的span以匹配其上限，然后将line-height添加到{ {1}}。您还需要设置padding-bottom: 30px，以便消除两个元素之间的任何垂直空间。

这是我手动完成的fiddle示例。

文本与行高之间的间距

4 个答案: