Question

CSS规范规定，应通过将指定值除以2并将结果应用于文本行的上方和下方来将行高应用于文本。

这与传统的领导理解有很大不同，这通常意味着间距仅在文本行上方“添加”。（我知道这不是100％正确，因为实际行高不会增加空间，而是设置行的高度;但是，通过这种方式描述问题更简单。）

考虑这个示例标记：

<!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>

如果行高等于传统的前导理解，那么<h1>和第一个<p>之间的距离将等于<p>之间的距离，因为这个距离是由领先者定义。然而，这种情况并非如此。

虽然<p>之间的距离保持一致（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

Answer 1

是
是。这不是很简单，但使用position:relative;，您可以正确排列，例如：
```
 h2 {
   font-size: 36px;
   line-height: 48px;
   position: relative;
   top: 6px;
 }
```
这是一项正在进行的工作demo
设计CSS的人不是排版员。这可能不是故意的。
Bonus回答：Here is a talk作者：Jonathan Hoefler关于网页设计类型和CSS限制的问题。

Answer 2

好吧，这似乎比我的其他解决方案更好。它仍然在块元素中使用额外的<span> s。诀窍是将块元素的line-height设置为1，并调整范围line-height，同时也用顶部和底部margin取消它。请注意，这需要将显示设置为inline-block。

然而，实际设置边距（以便在<h1>和<p>之间进行线高中断）变得相当困难并且需要一些数学运算。因此，我猜想，尝试使用传统的排版方法进行领导是非常耗费时间在CSS中实际应用于开发人员的工作。

无论如何，这是最终的代码：

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.p
            {
            display:inline-block;
            line-height: 32px;
            }

        span.h
            {
            display:inline-block;
            line-height: 64px;
            margin-top: -32px;
            margin-bottom: -32px;
            }

        p
            {
            margin:0;
            font-size: 26px;
            line-height: 1;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 1;
            }
        </style>

    </head>
    <body>

    <h1><span class="h">Molloy</span></h1>
    <p><span class="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.</span></p>
    <p><span class="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).</span></p>
    <h1><span class="h">Lorem Ipsum is simply</span></h1>
    </body>
</html>

Answer 3

我正在添加我自己的答案，但我并没有将其标记为“已接受”，因为我只想出了这种方法并且没有对它进行彻底检查。在标记可读性方面，它也非常混乱。

诀窍是在<span>标记中包含我们要应用标题的每个元素，并将<span>'s CSS属性vertical-align设置为middle或{ {1}}（它们会产生稍微不同的结果，我不确定它们的原因或具体差异）和sub到line-height。结果非常接近所需，因此上例中0和<h1>之间的距离几乎是正确的（显然不是很明显），即等于<p>的行-高度。我不是很擅长CSS，所以我不确定这会如何影响整体布局，是否可以使用这样的黑客，以及这是否会跨浏览器友好。如果你评论我的解决方案，我将不胜感激。

示例标记：

<p>

Answer 4

我意识到这个线程已经老了，但我也有这个问题。如果您想要与Word文档编辑器（例如Microsoft Word）具有相同的排版效果，那么就会出现涉及行高1的特殊情况。

而不是行高：1; put line-height：normal;。其他线高值保持不变（1.5保持1.5等）。

传统的前导和CSS线高

4 个答案: