【发布时间】：2013-07-25 16:47:59
【问题描述】：
我知道浏览器的默认字体大小是 16px。那么为什么 inline-block(12px) 的高度与字体大小相同（我在 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>
【问题讨论】：
-
“记住，当你年轻的时候，你就像太阳一样闪耀。闪耀在你疯狂的钻石上”。鼓舞人心。对不起，我跑题了。
-
在我的浏览器中我看到 16px
-
你还没有考虑下降。 R 高 12 像素（Opera 12）。如果从 R 的顶部到 y 的底部测量，它测量的是 15px，这在我的书中已经足够接近 16px，因为每个浏览器的文本呈现不同.
-
谢谢@cimmanon。回想起来，这似乎很明显。我试图让 R 的顶部与另一个元素对齐并最终得到了这个问题。