Question

line-height等浏览器的默认font-size是16px？

我应该为哪些HTML元素定义line-height而不是哪些？

为body { }提供行高的原因是什么？

line-height会影响单行文字吗？

如果我在em中使用字体，那么我还应该在line-height中使用em吗？

line-height和font-size之间的共同关系是什么？

Answer 1

根据我的经验，常见的默认行高似乎接近1.2（对于16px字体（16 * 1.2），这将是〜19px）。在某些浏览器版本中，它大约为1.1 - 但我记不起在该范围之外看到它。

line-height属性从父级继承到子级 - 因此在<body>上指定行高将影响页面上的所有元素，除了具有自己的行的那些元素 - 高度属性集及其后代。（见下面的例子）

行高会影响每个字符占用的高度 - 所以是的它也会对单行文本元素产生影响。

线高有三种基本风格：

'relative'/'unitless'（例如1.2）
'fixed'（例如14px）
'fixed-relative'（例如1.2em）

相对（无单位）值将根据字体大小按比例等效行高度应用于所有元素。同时，固定值（px）不会随字体大小而变化。

有关“固定相对”变体（'em'值）的解释，请参阅Eric Meyer的博客文章“Unitless Line-Heights”。

每种口味都有它在世界上的地位。： - ）

这是所有三个的简短例子：

body {
  font-size: 12px;
  line-height: 1.5;
}
small {
  font-size: 10px;
}
div {
  line-height: 21px;
}
p {
  line-height: 2em;
}

...

<body>
  one
  <small>two</small>
  <div>
    three
    <small>four</small>
  </div>
  <p>
    five
    <small>six</small>
  </p>
</body>

上例中的每个单词都有以下行高（翻译成px）

'one'== 18px（font-size的12px body的1.5倍
'two'== 15px（font-size的10px small的1.5倍
'three'== 21px（固定px值）
'four'== 21px（从px继承固定的div值）
'five'== 24px（font-size的12px p的2倍（继承自body））
'six'== 24px（从p继承（固定）预先计算的值）

Answer 2

通常，默认行高is about 1.1em（相对于元素使用的字体大小。

您应该在CSS中设置默认的行高，然后只在需要与此不同时修改页面中的行高。

当您要求标记中的文本具有指定的行高

时

不明白这个问题

只有在你需要的时候。

如果您使用em来指定行高，则高度将相对于字体大小成比例。

Answer 3

行高非常简单地说是文本行的高度，但它也适用于显示样式为inline的元素。

相当于领先的印刷排版。通常，您需要在文本行之间留出一点空间，并且通常您会看到应用整体行高为1.4或1.2的网站。值为1.4表示他们希望行高为文本高度的140％。如果行高设置为（或保持为）1，则可能发生奇怪的事情。当你看到一个斜体字移动整条线（使它看起来不均匀）时就会发生这种情况。

关于线高的一些问题

3 个答案: