CSS 规范指出，行高应通过将指定值除以二并将结果应用到文本行的上方和下方来应用于文本。
这与对行距的传统理解有很大不同，这通常意味着间距仅在文本行上方“添加”。 (我知道这不是 100% 正确，因为 line-height 实际上并没有增加空间，而是设置了行的高度；但是，这样描述问题更简单)。
考虑这个示例标记:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
margin:0;
font-size: 13pt;
line-height: 15pt;
}
h1
{
margin:0;
font-size: 21pt;
line-height: 30pt;
}
</style>
</head>
<body>
<h1>Title</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</body>
</html>
如果line-height等于传统理解的leading，那么<h1>之间的距离第一个<p>将等于 <p> 之间的距离的，因为这个距离是由前导定义的。然而，这种情况并非如此。
<p> 之间的距离s 保持一致( p's line-height - p's font-size = 15 - 13 = 2pt )，<h1> 之间的距离第一个<p>不同:它等于(p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5pt .
如果使用浏览器处理上述标记，肉眼很容易注意到这一点。
问题在于，在页面上保持垂直视觉节奏的传统方法是将元素的行距设置为基本行距的倍数。如上所示，该方法在 CSS 中不适用。
我有 3 个问题:
- 我对行高、行距及其区别的理解是否正确？
- 有没有办法通过 CSS 保持垂直节奏(是否通过 CSS 模仿传统行距)？
- (奖励问题)使行高与行距如此不同背后的原因是什么？
更新:非常感谢您的投入!请注意，我提出了自己的解决方案，如有任何评论，我将不胜感激:https://stackoverflow.com/a/8335230/710356
最佳答案
- 是
是的。这不是很简单，但是使用
position:relative;，你可以让事情正确排列，例如:h2 { font-size: 36px; line-height: 48px; position: relative; top: 6px; }这是一个正在进行的工作 demo
设计 CSS 的人不是排版师。这可能不是故意的。
- 奖励答案:Here is a talk Jonathan Hoefler 关于网络字体设计问题和 CSS 的限制。
关于typography - 传统行距和 CSS 行高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8334859/