解释:
这里有几件事情发生了。
在你的示例中,small
元素是一个行内级元素,这意味着它的垂直对齐方式由vertical-align
属性决定。
默认的vertical-align
值是baseline
,这意味着small
元素的基线将与父盒子的基线对齐:
使盒子的基线与父盒子的基线对齐。如果盒子没有基线,则将底部边缘与父基线对齐。
接下来,需要考虑line-height
属性以及其如何计算。还需要考虑前导和半导。在CSS中,半导是通过找到元素的line-height
和font-size
之间的差异,将其除以二,然后在文本上方和下方放置计算出的空间量来确定的。
为了说明这一点,这里有一个示例图像(来自W3.org):
![enter image description here](https://istack.dev59.com/Whq1hl.webp)
由于line-height
是20px
,而small
元素的font-size
是13px
,因此我们可以确定small
元素文本上下方添加了3.5px
的空间:
(20px - 13px) / 2 = 3.5px
同样地,如果我们计算周围文本节点的半行高,这些文本节点具有 font-size
为 16px
,那么我们可以确定在周围文本上方和下方添加了 2px
的间距。
(20px - 16px) / 2 = 2px
现在,如果我们把这些半导行空间的计算与 vertical-align
属性联系起来,你会注意到实际上在 small
元素基线下方添加了更多的空间。这就解释了为什么包含 small
元素的 p
元素的计算高度要大于其他 p
元素的计算高度。
话虽如此,你可能会期望随着 small
元素的 font-size
减小,p
元素的计算高度会继续增加。为了进一步说明这一点,你会发现当 small
元素的 font-size
设置为 6px
时,p
元素的计算高度为 23px
。
p { line-height: 20px; }
small { font-size: 6px; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
潜在解决方案:
由于我们知道高度差是由于 baseline
增加的额外空间造成的,因此我们可以将 small
元素的 vertical-align
值更改为 top
:
p { line-height: 20px; }
small { vertical-align: top; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
或者,你可以给small
元素设置line-height: 17px
,这会在元素上下各添加2px
的空间(和我们之前计算出来的文本周围添加的空间量相同)。
// Surrounding text that is 16px:
(20px - 16px) / 2 = 2px
// Small element text that is 13px:
(17px - 13px) / 2 = 2px
p { line-height: 20px; }
small { line-height: 17px; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
然而,你真的不想计算任何这些内容并硬编码它们,这意味着你应该只使用相对的 line-height
并省略 px
单位。
由于 font-size
是 16px
,所需的 line-height
值为 20px
,因此你需要将 line-height
除以 font-size
并得到 1.25
:
p { line-height: 1.25; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
如果您不想使用相对的line-height: 1.25
,而希望继续使用line-height: 20px
,那么您当然可以将small
元素的line-height
值重置为初始值,即normal
。
p { line-height: 20px; }
small { line-height: normal; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
span
元素替换small
元素,并测试不同的字体大小,你会发现任何比父元素字体大小小(即使只有一个像素)的东西都会使父元素高度为21px,而大于19px的较大字体大小则不会这样做(高度保持在20px)。 - Jukka K. Korpela