如何使元素的内容框适合其内容的字体大小答案

【问题标题】：How do I make the content box of an element fit the font-size of its contents如何使元素的内容框适合其内容的字体大小
【发布时间】：2017-07-11 00:45:17
【问题描述】：

如果你看这个代码笔https://codepen.io/anon/pen/pwQrmm

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

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

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

【问题讨论】：

“内容框”是什么意思？
是包含元素文本的最里面的框。当您在 chrome 开发工具中检查时，它显示为蓝色框。 More info here

标签： html css frontend font-size

【解决方案1】：

您可以设置行高以匹配字体大小。

line-height: 16px;

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

但不建议这样做。内容会变得过于拥挤，文字会过于靠近上方（和下方）的文字。 line-height 应该在 text-size 的 1,2x-1,5x 之间。

【讨论】：