标签使段落的高度变大答案

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

我有以下小提琴：

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

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

p { line-height: 20px }

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

为什么 标签会导致这些问题？ 我该如何解决这个问题？

段落文本中每次出现 都会弄乱我的baseline grid。

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

【问题讨论】：

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

标签： html css baseline

【解决方案1】：

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

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

p { line-height: 20px }
small{line-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-height 和 font-size 之间的差异，将其分成两半，然后在文本上方和下方放置计算出的空间量来确定的。

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

由于line-height是20px，并且small元素有13px的font-size，那么我们可以确定3.5px的空格是在small元素的文字上方和下方添加的：

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

同样，如果我们计算具有16px 的font-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-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>

【讨论】：

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

【讨论】：