Question

我有以下小提琴：

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

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

p { line-height: 20px }

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

为什么<small>标记会导致这些问题？ 我该如何解决这个问题？

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

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

Answer 1

说明：

这里发生了一些事情。

在您的示例中，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元素的font-size为13px，因此我们可以确定3.5px在small元素的文字上方和下方添加了空格：

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

同样地，如果我们计算具有font-size 16px的surronding文本节点的半前导，那么我们可以确定在{上面和下面添加2px空间周围的文字。

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

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

话虽如此，当p元素的font-size减少时，您会期望small元素的计算高度继续增加。为了进一步说明这一点，当p元素的23px设置为font-size时，您会注意到small元素的计算高度为6px

＆＃13;

p { line-height: 20px; }
small { font-size: 6px; }

＆＃13;

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

＆＃13;

潜在的解决方法：

由于我们知道高度差来自添加到baseline的额外空格，因此我们可以将vertical-align元素的small值更改为top ：

＆＃13;

p { line-height: 20px; }
small { vertical-align: top; }

＆＃13;

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

＆＃13;

或者，您可以为small元素line-height提供17px，这将导致在元素的上方和下方添加2px个空格（这是与我们上面计算的周围文本相同的空间量。）

// Surrounding text that is 16px:
(20px - 16px) / 2 =  2px

// Small element text that is 13px:
(17px - 13px) / 2 =  2px

＆＃13;

p { line-height: 20px; }
small { line-height: 17px; }

＆＃13;

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

＆＃13;

但是，您真的不想计算任何内容并对其进行硬编码，这意味着您应该只使用亲属line-height并省略px单位。

由于font-size为16px且所需的line-height值为20px，您可以将line-height除以font-size，得到1.25：

＆＃13;

p { line-height: 1.25; }

＆＃13;

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

＆＃13;

如果您不想使用亲戚line-height: 1.25，并且想要继续使用line-height: 20px，那么您当然可以重置small元素＆＃39} line-height值返回初始值，即normal。

＆＃13;

p { line-height: 20px; }
small { line-height: normal; }

＆＃13;

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

＆＃13;

Answer 2

Josh Crozier发布的答案的替代方案是重新设置小线高：

p { line-height: 20px }
small {line-height: initial;}

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

Answer 3

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

＆＃13;

p { line-height: 1.25; }

＆＃13;

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

＆＃13;

Answer 4

这种情况发生是因为小标签的字体大小：较小而p标签的尺寸大于小标签，所以这个小标签和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>

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

4 个答案:

说明：

潜在的解决方法：