如何用浏览器开发者工具检测并区分内联元素的内联盒与内容区高度

嘿，这个问题问得太精准了！内联元素的各种高度维度确实容易让人迷糊，我来带你用浏览器开发者工具一步步拆解清楚：

首先得明确：内联元素的内容区高度是由字体本身的属性（比如上伸高度、下伸高度）决定的，和font-size直接相关，但和line-height没关系；而**内联盒（inline box）**的高度完全由line-height控制。要查看内容区高度，这么操作：

• 打开开发者工具：按F12快捷键，或者右键点目标文本选「检查」。
• 在「Elements」面板里选中那个<span>（用左上角的选择器工具点页面上的文本，一秒就能选中）。
• 切换到「Computed」标签页，往下翻找到「Fonts」分类，展开后就能看到字体的具体度量——Ascent加Descent的总和就是内容区的真实高度。
• 嫌看数据不够直观？在「Styles」标签里给元素临时加个背景色：输入background: #ffcccc;，粉色覆盖的区域就是内容区（注意：这个背景不会延伸到line-height带来的上下空白行间距）。

要把这两个区域清晰分开，咱们用DevTools临时修改样式就行，给不同区域加不同标识：

1. 标记内容区：刚才加的background: #ffcccc;就够用了，粉色块就是内容区的范围。
2. 标记内联盒：给元素加个outline: 1px solid blue;（用outline比border好，因为它不占布局空间），蓝色线框会完整包住整个内联盒——也就是你设置的line-height:21px对应的高度。
3. 进阶玩法：Chrome的DevTools还有个贴心功能，切换到「Layout」标签页，找到「Inline elements」选项勾上，页面上会直接显示内联盒的高度标注，还有内容区的范围提示，连计算都省了！

拿你的示例代码来说，操作后会看到：粉色的内容区（高度约15px）被蓝色的21px高的内联盒包裹着，上下各有3px的空白行间距（(21-15)/2=3），谁是谁一眼就能分清。

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