我了解浏览器的默认字体大小为16px。那么为什么inline-block（12px）的高度与font-size相同（我在Chrome和FF中尝试过）？请帮助我理解。谢谢。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font: 100% helvetica, arial, sans-serif;
line-height: 1.625;
}
#tempTest {
display: inline-block;
width: 10px;
height: 12px;
background-color: orange;
}
</style>
</head>
<body>
<p class="heading"><span id="tempTest"></span>Remember, when you were young, you shone like a sun. Shine on you crazy diamond</p>
</body>
</html>
最佳答案
如果您使用浏览器的开发人员工具检查内嵌框（按F12键将其打开），则可以看到其高度确实为12像素（如代码中所设置）。发生这种情况是因为其中没有什么需要更高的高度。通常，内联块高度的确切计算取决于浏览器。
文本的字体大小仍然是浏览器默认值，通常为16px。字体大小并不表示任何特定字母的高度。它只是字体的基本属性。印刷者通常设计字符，以便它们与上升，下降和变音符号一起适应由字体大小设置的限制（或略微超出它们），并且通常大多数字母的高度都较小。
关于css - 设置body {font-size:100％}会导致font-size:12px;而不是font-size:16px；为什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17864014/