传统排版和CSS行高

Question

传统排版和CSS行高

13

CSS规范规定，行高应该通过将指定的值除以2并将结果应用于文本行上方和下方来应用于文本。这与传统的导读理解有很大不同，传统的导读意味着只在文本行之上“添加”间距。（我知道这并不完全正确，因为实际上行高并没有添加空间，而是设置了行的高度；然而，这样更容易描述问题）。

考虑这个示例标记：

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

如果行高等于传统理解中的行间距，那么

和第一个
之间的距离将等于
之间的距离，因为这个距离是由行间距定义的。然而，事实并非如此。
虽然
之间的距离保持一致（
的行高-
的字体大小=15-13=2pt），但

和第一个
之间的距离不同：它等于（
的行高-
的字体大小）/ 2 +（h1>的行高-h1>的字体大小）/ 2 =（15-13）/ 2 +（30-21）/ 2 =5.5pt。
如果使用浏览器处理上述标记，则可以轻松地用肉眼观察到这一点。
问题在于，在页面上保持垂直视觉节奏的传统方法是通过将元素的行间距设置为基本行间距的倍数。如上所示，这种方法在CSS中不适用。
我有3个问题：
1. 我对行高、行间距及其差异的理解是否正确？ 2. 是否有一种方法可以使用CSS来保持垂直节奏（通过模拟CSS或其他方式的传统行间距）？ 3. （附加问题）使行高与行间距如此不同的原因是什么？
更新：非常感谢您的意见！请注意，我提出了自己的解决方案，非常感谢任何对此的评论：https://dev59.com/Fmsy5IYBdhLWcg3wxAyO#8335230

- Stas Bichenko

4个回答

1

好的，这似乎比我的其他解决方案更好。它仍然在块元素内部使用了额外的标签。关键是将块元素的line-height设置为1，并调整span的line-height，同时还要用上下margin来抵消它。请注意，这需要将显示设置为inline-block。

然而，实际上设置边距（以便在

和

之间产生一个行高断点）变得非常困难，需要一些数学计算。因此，我想，在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>

- Stas Bichenko

0

我知道此贴很旧了，但我也遇到了这个问题。如果您想要与Microsoft Word等文字编辑器相同的排版效果，则有一种特殊情况涉及行高1。

与其使用line-height：1; 不妨使用line-height：normal;。其他行高值保持不变（1.5仍为1.5等）。

- Perry Monschau

0

我正在添加自己的答案，但我不会将其标记为“已接受”，因为我刚想出这种方法，并且还没有彻底检查过它。就标记易读性而言，它也相当混乱。

诀窍是将我们想要应用标题的每个元素都包装在<span>标签中，并将<span>的CSS属性vertical-align设置为middle或sub（它们产生略微不同的结果，我不确定它们之间的区别或如何不同），并将line-height设置为0。结果非常接近所需的结果，因此上面示例中<h1>和<p>之间的距离几乎正确（显然不完全正确），即等于<p>的行高。我不太擅长CSS，因此我不确定这可能会影响整体布局，是否可以使用此类技巧以及是否会跨浏览器友好。如果您对我的解决方案发表评论，我将不胜感激。

示例标记：

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.lh
            {
            vertical-align: sub;
            line-height:0
            }
        p
            {
            margin:0;
            font-size: 26px;
            line-height: 30px;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 60px;
            }
        </style>

    </head>
    <body>

    <h1><span class="lh">Title</span></h1>
    <p><span class="lh">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="lh">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="lh">Lorem Ipsum is simply</span></h1>
    </body>
</html>

- Stas Bichenko

这样做的缺点是可维护性和语义。如果CSS能为我们提供更多的选项，那不是很好吗！ - joshnh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bookcasey · Accepted Answer

Yes
Yes. It is not very simple, but using position:relative;, you can get things to line up correctly, for example:
```
 h2 {
   font-size: 36px;
   line-height: 48px;
   position: relative;
   top: 6px;
 }
```
Here is a work-in-progress demo
The people who designed CSS are not typographers. It was probably not intentional.
Bonus answer: Here is a talk by Jonathan Hoefler about the problems with designing type for the web and the limits of CSS.

传统排版和CSS行高

和第一个之间的距离将等于之间的距离，因为这个距离是由行间距定义的。然而，事实并非如此。虽然之间的距离保持一致（的行高-的字体大小=15-13=2pt），但

和第一个
之间的距离将等于
之间的距离，因为这个距离是由行间距定义的。然而，事实并非如此。
虽然
之间的距离保持一致（
的行高-
的字体大小=15-13=2pt），但