html - 具有行高的文本之间的间距

Question

我想在 h1 和 span 之间留一个间距，应该是 30px。从 h1 的字母底部到 span 的字母顶部应该是 30px，在 下面>h1，这里是一张图片，其中30px的间距应该是(蓝框显示间距):

我的 h1 和 span 有一些 line-height。我在它周围做了一个 border，所以 line-height 是可见的。如果我现在将 30px 的 margin-bottom 设置为 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;
}

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

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

我希望这已经足够清楚了。

Answer 1

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

设置 line-height:100%; margin :0； padding:0; 和 box-sizing:border-box;(因此边框不会添加到高度)会让你有点更近。

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

因此，您可以实际实现所需内容的唯一方法是使用魔数(Magic Number)(通过反复试验获得的数)将行高调整为低于实际字体大小的值。正确的值通常在 68-70% 的范围内，但没有适用于任何字体大小的公式，更不用说任何字体了。

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;
}

<h1>Default qgj main Title</h1>

<p>Proin eget tortor risus. Vivamus magna justo, </p>

当然，这是极其脆弱且容易出现问题的。因此，要实现有些相似，最好的办法是继续在页边空白处使用魔数(Magic Number)。

有一些公式可以让您更轻松地进行猜测，但它们实际上取决于您选择的字体、字体大小等。所以，再一次，神奇的数字。