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

Question

我有以下小提琴:

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.

为什么<small>标签会导致这些问题？我怎样才能解决这个问题？

<small>段落文本中的每个出现都会扰乱我的基线网格.

---

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

Answer 1

说明:

这里发生了一些事情.

在您的示例中,small元素是内联级元素,这意味着它的垂直对齐方式由vertical-align属性决定.

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

将框的基线与父框的基线对齐.如果框没有基线,请将底部边距边缘与父级基线对齐.

接下来,您需要考虑line-height属性及其计算方式.您还需要考虑领先和半领先.在CSS中,半导联是通过找到元素之间的差异line-height并将其font-size除以一半,然后将计算出的空间量放在文本的上方和下方来确定的.

为了说明,这是一个示例图像(摘自W3.org):

由于line-height是20px和small元素具有font-size的13px,那么我们可以判断3.5px的空间,上方和下方的添加small元素的文本:

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

同样,如果我们计算surronding文本节点,其具有的半领先font-size的16px,那么我们可确定2px的空间的上方和下方的周围的文本添加.

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

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

有了这样说,你会期望的计算高度p元素将继续增加作为font-size该的small元素减少.为了进一步说明这一点,你会发现的计算高度p元素是23px当font-size在的small元素设置为6px.

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

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

潜在的解决方法:

由于我们知道高度差是由添加到的额外空间产生的baseline,因此我们可以vertical-align将small元素的值更改为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>