CSS Line-Height Guide

时间:2010-02-14 20:02:21

标签: css

我记得读过一个样式指南,解释每个元素的正确行高应该是多少。我在谷歌上找不到它。

如果有人能将我链接到这样的指南,或者在答案中解释它,我将不胜感激。

谢谢!

编辑:抱歉,请让我澄清一下。我不是在询问如何使用CSS来设置行高,而是建议的行高是多少。例如标题,段落文本等。

谢谢!

4 个答案:

答案 0 :(得分:8)

也许这些引用更像你正在寻找的东西。我还没有找到明确的规则,但至少在这里需要考虑一些事情。

这个建议取决于你选择的font-family: http://www.webteacher.ws/2009/09/30/improve-readability-with-line-height/

这个建议它取决于线条的宽度: http://kingdesk.com/articles/optimal-line-height/

此引用基本上同意以下两者: http://www.wpdesigner.com/2007/06/21/web-typography-line-spacing/

主要规则似乎是(1)更宽的文本行需要更高的行高,以及(2)如果小写字母的高度是高度的高百分比,则基于字体需要更大的行高大写字母。

最好的方法可能只是为了观察它,并尽量避免难以穿透的文本墙。

答案 1 :(得分:7)

信息here非常基本,但很有用。

总结:

默认line-height:normal提供line-height:1.2,字体大小的120%。如果您要更改它,通常最好使用没有单位的数字,例如lineheight:1.5(字体大小的150%),因为元素的行高将从< em>该元素的字体大小,即使行高是从具有不同字体大小的元素继承的。

如果您改为说line-height:10em,则根据指定行高的元素上的字体计算。 。 。如果此行高由具有不同字体大小的元素继承,则可能是错误的。

同样,如果line-height:10px的特定数量的像素由具有不同字体大小的元素继承,则肯定会出错。

答案 2 :(得分:0)

通常为120%(字体大小)。

答案 3 :(得分:0)

W3学校建议(here)线高1.6​​,不过我已经看到1.2到1.45之间也很好