Question

据我所知，浏览器的默认字体大小为16px。那么为什么内联块（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>

Answer 1

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

文本的字体大小仍然是浏览器的默认值，通常为16px。字体大小并不意味着任何特定字母的高度。它只是字体的基本属性;印刷师通常设计字符，使它们 - 与上升器，下降器和变音符号一起 - 适合由字体大小设置的限制（或延伸到它们上面一点点），通常大多数字母的高度都较小。

设置body {font-size：100％}会产生font-size：12px;而不是font-size：16px;为什么？

1 个答案: