块元素背景与子行内元素背景差异及文本下行线溢出问题问询

这个问题问到了CSS行内布局里容易被忽略的核心细节，咱们从三个关键角度拆解来看：

1. line-height与块元素高度的绑定关系 #

当你把p元素的line-height设为和font-size相等时，p作为块级元素，它的高度完全由内部**行框（line box）**的高度决定——而行框的高度默认就等于line-height的值。

这里藏着一个字体设计的小秘密：CSS的font-size控制的是字体的**em框（em box）**高度，这是字体设计的基准方框，但很多字体的实际字形（比如小写g、y的下行部分，或者大写字母的上行部分）会特意超出这个em框来保证视觉美观。当line-height和font-size相等时，行框高度刚好和em框高度一致，那些超出em框的字形自然就会“跑”到p元素的背景外面去了。

2. 行内元素的背景覆盖逻辑 #

span作为行内元素，它的背景是直接覆盖自身的**内容区域（content area）**的。这个内容区域的高度不是由line-height决定的，而是由字体的实际字形范围定义——简单说就是，不管em框多大，内容区域都会老老实实把整个字形（包括上行、下行的延伸部分）包裹起来，所以span的背景自然能容纳所有字形线条。

哪怕你给span也设置line-height: 1em，它的背景依然会覆盖完整的字形，因为行内元素的背景是绑定内容区域，而非行框高度的。

3. 匿名行内文本的布局特殊性 #

p里面的匿名行内文本（没被行内标签包裹的文本），它的布局是完全依附于行框的。行框高度由line-height控制，而匿名文本的字形如果超出em框，就会突破行框的范围，进而超出p的背景。而span作为显式的行内元素，它的内容区域会独立包裹字形，不受行框高度的限制（行框只影响行与行之间的间距，不影响单个行内元素的背景范围）。

举个直观的测试：如果给p设置line-height: 1.5em，你会发现p的背景高度变大，刚好能容纳下行线——这就是因为行框高度增加后，把超出em框的字形也包含了进去。

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