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

概述我有以下小提琴： 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. 为什么< 我有以下小提琴：

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

总结

以上是内存溢出为你收集整理的html – 标签弄乱了段落的高度全部内容，希望文章能够帮你解决html – 标签弄乱了段落的高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。