CSS块级元素默认高度计算规则及精确测量方法

你观测到的font-size:16px时p标签渲染高度18.52px，本质是默认line-height: normal结合字体度量、浏览器渲染规则共同作用的结果，不存在通用的固定比例换算，精确计算和测量方法如下：

核心计算逻辑 #

无padding、border、margin的单行文本块元素，渲染高度完全等于内部行盒（line box）的高度，由当前生效字体的内置参数决定：

• 所有字体文件内都写死了4个核心度量参数，不受CSS控制：
  • unitsPerEm：字体的em基准单位数，主流字体取值为1000或2048
  • ascent：字体基线到字符最高处的距离
  • descent：字体基线到字符最低处的距离
  • lineGap：字体预留的行额外间距
• 浏览器对默认值line-height: normal的计算公式为：

  行高像素值 = (ascent + descent + lineGap) / unitsPerEm * font-size
  

• 最终渲染值会经过浏览器渲染引擎的亚像素舍入处理：不同浏览器、不同页面缩放比例下，舍入规则有细微差异，这也是你拿到18.52px这类非整数值的直接原因。

注意：所谓"默认line-height是font-size的115%~120%"只是经验区间，不是规范要求的固定值，换字体、换操作系统、换浏览器都会让这个比例发生变化，不能用来做精确计算。

精确测量方法 #

不需要手动换算字体参数，直接用浏览器开发者工具就能拿到100%准确的渲染值：

• 打开开发者工具，选中目标p元素
• 切换到「计算样式（Computed）」面板，搜索line-height属性，显示的像素值就是无盒模型额外属性时的元素内容高度
• 如果需要核对字体影响，可以在面板的字体信息栏，查看当前实际生效的渲染字体（CSS声明的字体可能因本地不存在发生fallback，以实际生效的字体参数为准）

测试用基础代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>simple text</p>
  </body>
</html>

内容的提问来源于stack exchange，提问作者jasper93