html - 如何以百分比指定行高，就像指定高度一样？

Question

例如，我可以这样写:

<div id="foo">Hello</div>

还有这个:

#foo {
  display: block;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

它会使 #foo 元素成为一个 block 级元素，高度为 100px，并将单词 Hello 置于 div 的中心。

但是如果我这样写呢:

<div id="foo">Hello</div>

还有这个:

#foo {
  display: block;
  height: 100%;
  line-height: 100%;
  text-align: center;
}

然后突然之间，line-height 停止工作，因为 CSS 处理器假定 line-height: 100% 是正常的行高，而不是实际上是元素父元素的高度。

那么我如何像使用 height 一样使用 line-height 的百分比？

谢谢。

Answer 1

那是 how the property is supposed to work .当您指定百分比 line-height 时，生成的像素值是元素的计算字体大小乘以您指定的值。设置为100%与设置为1是一样的； parent 不在这里。

设置 line-height: inherit 会将像素值设置为父元素的 line-height 值，这可能对您有用。但是，父级(的文本)的行高不一定与盒模型术语中父级的高度相同。