我如何指定高度百分比的行高，因为我会指定高度？

Question

例如，我可以这样写：

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

而且：

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

它会使#foo元素成为块级元素，高度为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%是正常的行高，而不是元素的父高度。

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

感谢。

Answer 1

那是how the property is supposed to work。指定百分比line-height时，结果像素值是元素的计算字体大小乘以您指定的值。将其设置为100%与将其设置为1相同;父母不会在这里进入。

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