html – 标签弄乱了段落的高度

我有以下小提琴：

<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.

解决方法

说明：

这里有一些事情发生.

在你的例子中,小元素是inline-level element,这意味着它的垂直对齐由vertical-align property决定.

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

Align the baseline of the Box with the baseline of the parent Box. If the Box does not have a baseline,align the bottom margin edge with the parent’s baseline.

接下来,您需要考虑line-height property,calculated如何.您还需要考虑leading and half-leading.在CSS中,半导体是通过找到元素的线高和字体大小之间的差异来确定的,将其除以一半,然后将计算出的空间数量放置在文本的上方和下方.

为了说明,这里是一个示例图像(taken from W3.org)：

07006

由于行高为20像素,小元素的字体大小为13px,所以我们可以确定在小元素的文本上方添加3.5px的空格：

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

同样,如果我们计算出一个字体大小为16px的创建文本节点的半边,那么我们可以确定在周围文本上方和下方添加了2px的空格.

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

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

就这样说,你会期望p元素的计算高度继续增加,因为小元素的字体大小减小.为了进一步说明这一点,当小元素的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>

潜在的解决方法：

由于我们知道高度差是由于添加到基线的额外空间而导致的,所以我们可以将小元素的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>

或者,您可以给小元素一个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>

但是,您真的不想计算任何内容并对其进行编码,这意味着您应该使用相对的行高,并省略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>

如果不想使用相对线高度：1.25,并且要继续使用line-height：20px,那么您当然可以将小元素的线高度值重置为初始值,这是正常的.

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

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

原文地址：https://www.jb51.cc/html/230607.html

html – 标签弄乱了段落的高度

解决方法

相关推荐