如何使元素的内容框符合其内容的字体大小

Question

如果您查看此代码集https://codepen.io/anon/pen/pwQrmm

`h2 {
  padding-top:16px;
  padding-bottom:16px;
  font-size: 16px;
}`

h2标签设置为字体大小为16px，但其内容框的高度为18px。有没有办法在内容框上设置高度以匹配字体大小，而无需手动将其高度设置为高度：16px。此外，当h2标记变为两行时，内容框应变为32px。

我尝试搜索此问题但未找到任何答案。如果之前已经回答过，我很抱歉。

Answer 1

您可以设置line-height以匹配font-size。

line-height: 16px;

当你写了足够的内容（所以会有第二行）时，它会变成32px。

然而，这并不是建议。内容将变得过于拥挤，文本将太接近上面（和下面）的文本。 行高应在文本大小的1.2x-1,5x之间。