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>在段落文本中混乱了我的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>
