< small>标签使段落高度变大 [英] <small> tag makes height of paragraph larger
问题描述
我有以下小提琴：
线高为 20px ，而 small 元素具有 13px 的 font-size ，那么我们可以确定 3.5px small 元素的文本上方和下方添加$ c>的空间：
（20px-13px）/ 2 = 3.5px
同样，如果我们计算环绕文本节点的半导，它们的 font-size 为 16px ，则可以确定在周围文本的上方和下方添加了 2px 的空间。
（20px-16px）/ 2 = 2px
现在，如果我们将这一半将空间计算返回到 vertical-align 属性，您会注意到实际上在 small 元素。这解释了为什么包含 small 元素的 p 元素的计算高度比另一个 p 元素。
话虽如此，您期望 p的计算高度元素会随着 small 元素的 font-size 减小而继续增加。为了进一步说明这一点，您会注意到 p 元素的计算高度为 23px ，而<$ c small 元素的$ c> font-size 设置为 6px 。
p {line-height：20px; } small {font-size：6px; }
< p>一些普通大小的文本< / p>< p>某些< small< small< / small>大小的文本< / p>
潜在的解决方法：
由于我们知道高度差是由多余的添加到基线的空格中，我们可以更改的元素到 vertical-align 值小 top ：
p {行高：20px; }小{垂直对齐：顶部； }
< p>一些普通大小的文本< / p>< p>某些< small< small< / small>大小的文本< / p>
或者，您可以将 small 元素的 line-height 设置为 17px ，这会导致在元素上方和下方添加 2px 的空间（与
//周围的文本为16px：
（20px） -16px）/ 2 = 2px
//小像素文本为13px：
（17px-13px）/ 2 = 2px
p {line-height：20px; }小{行高：17px; }
< p>一些普通大小的文本< / p>< p>某些< small< small< / small>大小的文本< / p>
但是，您真的不想计算任何内容并对其进行硬编码，这意味着您应该只使用相对的 line-height 并省略 px 个单位。
由于 font-size 为 16px ，所需的 line-height 值为 20px ，则将 line-height 除以 font-size 得出 1.25 ：
p { -高度：1.25； }
< p>一些普通大小的文本< / p>< p>某些< small< small< / small>大小的文本< / p>
如果您不想使用相对的线高：1.25 ，并且想继续使用 line-height：20px ，那么您当然可以重置 small 元素的 line-height 值恢复为初始值，即 normal 。
p {line-height：20px; }小{行高：正常； }
< p>一些普通大小的文本< / p>< p>某些< small< small< / small>大小的文本< / p>
I have the following fiddle:
http://jsfiddle.net/tompazourek/sn5jp/
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
p { line-height: 20px }
When I inspect the page in Chrome, I find out that the computed height of the first paragraph is 20px, but the computed height of the second paragraph is 21px.
Why is the <small> tag causing these problems? How can I fix this?
Every occurence of <small> in the paragraph text messes up my baseline grid.
EDIT: I later also found an interesting article relevant to this topic: Deep dive CSS: font metrics, line-height and vertical-align.
Explanation:
There are a few things happening here.
In your example, the small element is an inline-level element, which means that its vertical alignment is determined by the vertical-align property.
The default vertical-align value is baseline, which means that the baseline of the small element will be aligned to the baseline of the parent box:
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.
Next, you need to consider the line-height property and how it is calculated. You also need to take leading and half-leading into account. In CSS, half-leading is determined by finding the difference between the element's line-height and font-size, dividing that in half, and then placing the calculated amount of space above and below the text.
For illustration, here is an example image demonstrating this (taken from W3.org):
Since the line-height is 20px, and the small element has a font-size of 13px, then we can determine that 3.5px of space is added above and below the small element's text:
(20px - 13px) / 2 = 3.5px
Likewise, if we calculate the half-leading of the surronding text nodes, which have a font-size of 16px, then we can determine that 2px of space is added above and below the surrounding text.
(20px - 16px) / 2 = 2px
Now if we relate these half-leading space calculations back to the vertical-align property, you will notice that more space is actually being added below the baseline of the small element. This explains why the computed height of the p element containing the small element was larger than the computed height of the other p element.
With that being said, you would expect the computed height of the p element to continue increasing as the font-size of the small element decreases. To further illustrate this point, you will notice that the computed height of the p element is 23px when the font-size of the small element is set to 6px.
p { line-height: 20px; }
small { font-size: 6px; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
Potential Workarounds:
Since we know that the height difference results from the extra space that is added to the baseline, we could change the vertical-align value of the small element to top:
p { line-height: 20px; }
small { vertical-align: top; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
Alternatively, you could give the small element a line-height of 17px, which would result in 2px of space being added above and below the element (which is the same amount of space that is added for the surrounding text like we calculated above).
// 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>
However, you really don't want to be calculating any of that and hardcoding it, which means that you should just use a relative line-height and omit the px units.
Since the the font-size is 16px and the desired line-height value is 20px, you would divide the line-height by the font-size and get 1.25:
p { line-height: 1.25; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
If you don't want to use a relative line-height: 1.25, and you want to continue using line-height: 20px, then you could of course reset the small element's line-height value back to the initial value, which is normal.
p { line-height: 20px; }
small { line-height: normal; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
这篇关于< small>标签使段落高度变大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
