0

我知道浏览器上的默认字体大小是 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>
4

1 回答 1

0

如果您使用浏览器的开发工具检查内联框（按 F12 打开它们），您可以看到它的高度确实是 12px，如您的代码中设置的那样。发生这种情况是因为其中没有任何东西需要更高的高度。通常，内联块高度的精确计算取决于浏览器。

文本的字体大小仍然是浏览器的默认值，通常为 16px。字体大小并不意味着任何特定字母的高度。它只是字体的基本属性；排版师通常设计字符，以便它们 - 连同升序、降序和变音符号 - 符合字体大小设置的限制（或稍微超出它们），并且通常大多数字母的高度较小。

于 2013-07-25T18:09:49.353 回答