<small> 标签使段落的高度变大

Posted

技术标签:

【中文标题】<small> 标签使段落的高度变大【英文标题】:<small> tag makes height of paragraph larger 【发布时间】:2014-06-21 02:27:45 【问题描述】:

我有以下小提琴:

http://jsfiddle.net/tompazourek/sn5jp/

<p>some normal-sized text</p>

<p>some <small>small</small>-sized text</p>

p  line-height: 20px 

当我在 Chrome 中检查页面时,我发现第一段的计算高度是 20px,但第二段的计算高度是 21px。

为什么&lt;small&gt; 标签会导致这些问题? 我该如何解决这个问题?

段落文本中每次出现&lt;small&gt; 都会弄乱我的baseline grid。


编辑:我后来还发现了一篇与此主题相关的有趣文章:Deep dive CSS: font metrics, line-height and vertical-align。

【问题讨论】:

这真的很神秘。如果您将 small 元素替换为 span 元素并使用不同的字体大小进行测试,您会注意到任何比父元素的字体大小更小的(甚至一个像素)都会使父元素高 21 像素,而更大的高达 19px 的字体大小不会这样做(高度保持在 20px)。 【参考方案1】:

发生这种情况是因为 small 标签的 font-size:smaller 和 p 标签的尺寸比 small 标签大,所以 small 标签和 p 标签的差异造成了这个问题。当您将小标签放入 p 标签时,请增加高度,因为小标签占用的空间较小,然后是 p 标签。

解决这个问题你必须给小标签19px的行高,像这样:

p  line-height: 20px 
smallline-height: 19px
<p>some normal-sized text</p>

<p>some <small>small</small>-sized text</p>

【讨论】:

【参考方案2】:

说明:

这里发生了一些事情。

在您的示例中,small 元素是inline-level element,这意味着它的垂直对齐方式由vertical-align property 确定。

vertical-align的默认值为baseline,这意味着small元素的基线将与父框的基线对齐:

将框的基线与父框的基线对齐。如果框没有基线,则将下边距边缘与父级的基线对齐。

接下来,您需要考虑line-height property 以及它是如何calculated。您还需要考虑leading and half-leading。在 CSS 中,半前导是通过找出元素的 line-heightfont-size 之间的差异,将其分成两半,然后在文本上方和下方放置计算出的空间量来确定的。

为了说明,这里有一个示例图片展示了这一点 (taken from W3.org):

由于line-height20px,并且small元素有13pxfont-size,那么我们可以确定3.5px的空格是在small元素的文字上方和下方添加的:

(20px - 13px) / 2 =  3.5px

同样,如果我们计算具有16pxfont-size 的环绕文本节点的半前导,那么我们可以确定在周围文本的上方和下方添加了2px 的空格。

(20px - 16px) / 2 =  2px

现在,如果我们将这些半前导空间计算与vertical-align 属性相关联,您会注意到实际上在small 元素的基线下方添加了更多空间。这就解释了为什么包含small 元素的p 元素的计算高度大于另一个p 元素的计算高度。

话虽如此,您会期望p 元素的计算高度随着small 元素的font-size 的减小而继续增加。为了进一步说明这一点,您会注意到当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-height17px,这将导致在元素上方和下方添加 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-size16px 并且所需的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>

【讨论】:

好的,您刚刚找到了解决问题的方法。对此表示敬意:)。但是与顶部对齐的 &lt;small&gt; 文本仍然看起来很奇怪。另外我还没有真正理解背后发生的原因和机制。 @TomPažourek - 我看到你在这个问题上添加的赏金,我打算回答它,但后来我意识到我已经回答了差不多三年前......这太疯狂了!我只是添加了一个正式的解释来澄清实际发生的事情......我现在比三年前有了更多的经验,所以希望这会有所帮助;) 是的,我只是在某个地方再次注意到这个问题,并认为它应该得到适当的解释。再次感谢您的精心回答:) 看起来很棒。我会将这个问题保留一段时间,但看起来你会赢得赏金。 :) 现在这是我很久没见过的好问题和好答案的结合。这个问题我想了很久,但无法解释。谢谢你们两个:) @JoshCrozier 我今天又详细阅读了你的回答,但我仍然不明白一切。我一直跟着你直到vertical-align 变通办法,但最后三个line-height 变通办法仍然涉及我不太明白的东西。我制作了another snippet,其中文本被分成两行,第二段仅包含&lt;small&gt; 文本和line-height: 17px。我不明白为什么两个段落的高度仍然是 40 像素。不知何故,我假设如果&lt;small&gt; 将行高设置为 17 像素,那么它将只有 34 像素高。【参考方案3】:

Josh Crozier 发布的答案的替代方法是全部重置小行高:

p  line-height: 20px 
small line-height: initial;
<p>some normal-sized text</p>

<p>some <small>small</small>-sized text</p>

【讨论】:

【参考方案4】:

您可以为line-height 使用相对值。在您的情况下,基本字体大小为 16px,因此相对单位为 20px 的行高将是 1.25

p  line-height: 1.25; 
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>

【讨论】:

以上是关于<small> 标签使段落的高度变大的主要内容,如果未能解决你的问题,请参考以下文章

Markdown常用语法

HTML笔记

使用引导程序使每列内的元素具有相同的高度

如何使DIV的高度固定,当超出固定高度时,让文字自动上下循环滚动

初识HTML标签

段落标签