如何获取CSS内联元素的内联盒与内容区域位置？含Chrome DevTools方法

嘿，我来帮你把这个内联盒（inline box）和内容区域（content area）的位置问题讲清楚～结合你给出的代码和背景色方案，咱们一步步拆解：

1. 先明确两个关键盒子的定义 #

• 内容区域（Content Area）：这是内联元素最“本质”的盒子，完全由font-size和字体本身的特性决定，和line-height没有直接关系。简单说，就是字体字形（glyphs）实际占据的空间。
• 内联盒（Inline Box）：内联元素的可见渲染盒子，是内容区域加上line-height分配的额外空间——但如果内容区域的高度比line-height还大，内联盒会被内容区域直接“撑开”。

2. 对应到你的<p>和<strong>元素 #

先贴一下你的代码方便对照：

p { background: red; }
strong { background: green; }

<p style="font-size:12px; line-height:12px;"> which is <strong style="font-size:24px;">strongly emphasized</strong> and which is </p>

关于<p>元素 #

• 内容区域高度：因为font-size:12px，默认字体下字形刚好填满这个高度，所以内容区域高度就是12px；
• 内联盒高度：你设置了line-height:12px，和font-size完全一致，所以内联盒高度和内容区域高度重合，红色背景刚好完整覆盖<p>的内联盒范围，也就是那些未被<strong>包裹的文本所在的区域。

关于<strong>元素 #

• 内容区域高度：font-size:24px，所以内容区域高度是24px；
• 内联盒高度：它继承了父元素<p>的line-height:12px，但这个值比它的内容区域高度小很多——这时候内联盒的高度会被内容区域“强制撑开”，最终等于内容区域的24px。这就是你看到绿色背景块比红色背景高，并且上下超出红色区域的原因。

3. 补充：Chrome DevTools的查看技巧 #

其实DevTools也能帮你验证，只是需要找对入口：

• 选中元素后，切换到Computed面板，查看font-size和line-height的计算值，就能推算出内容区域和内联盒的关系；
• 如果你开启了实验性功能，在Layout面板里能直接看到内联元素的盒子模型可视化效果，不过用背景色的方法确实更直观，一眼就能锁定范围。

内容的提问来源于stack exchange，提问作者A.Chao