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

Question

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

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

h2 标签的字体大小设置为 16px，但其内容框的高度为 18px。有没有一种方法可以设置内容框的高度以匹配字体大小，而无需手动将其高度设置为 height: 16px。另外，当 h2 标签变成两行时，内容框应该变成 32px。

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

Answer 1

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

line-height: 16px;

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

但是不建议这样做。内容会变得太拥挤，文本会太靠近上面(和下面)的文本。行高应介于文本大小的 1,2x-1,5x 之间。