排版 – 传统领先和CSS线高

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的行高 – p的字体大小)/ 2(h1的行高 – h1的字体大小)/ 2 =(15 – 13)/ 2(30-21)/ 2 = 5.5 PT.

如果使用浏览器处理上述标记,则可以轻易地注意到这一点.

问题在于,在页面上保持垂直视觉节律的传统方式是通过将元素的领先设置为基数的倍数.这种方法在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限制的问题.

排版 – 传统领先和CSS线高

解决方法

相关文章