Html <；小型>；标记使段落的高度变大

我有以下几把小提琴：

---

当我在Chrome中查看页面时，我发现第一段的计算高度是20px，而第二段的计算高度是21px

为什么

标签会导致这些问题如何解决此问题？

段落文本中出现的每一个

，都会把我的文章搞乱

---

编辑：我后来还发现了一篇与此主题相关的有趣文章：。

说明： 这里发生了一些事情

在您的示例中，

small

元素是一个元素，这意味着它的垂直对齐由

默认的

垂直对齐

值为

基线

，这意味着

小元素的基线将与父框的基线对齐：

将长方体的基线与父长方体的基线对齐。如果长方体没有基线，请将底部边距边缘与父对象的基线对齐

接下来，你需要考虑它和它是怎样的。你还需要考虑到。在CSS中，半行距是通过查找元素的
行高
和
字体大小
之间的差异来确定的，将其一分为二，然后将计算出的空间量放在文本的上方和下方

为了便于说明，下面是一个示例图像，演示了这一点（）：


由于
行高
为
20px
，并且
small
元素的
字体大小
为
13px
，因此我们可以确定
small
元素文本的上方和下方添加了
3.5px
的空格：

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

同样，如果我们计算周围文本节点的半前导，其
字体大小为
16px
，那么我们可以确定
2px
的空格添加在周围文本的上方和下方

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

现在，如果我们将这些半前导空间计算与
垂直对齐
属性相关联，您将注意到在
小元素的基线下方实际上添加了更多的空间。这解释了为什么包含
small
元素的
p
元素的计算高度大于另一个
p
元素的计算高度

话虽如此，随着
small
元素的
font size
减小，您会期望
p
元素的计算高度继续增加。为了进一步说明这一点，您将注意到当
small
元素的
font size
设置为
6px
时，
p
元素的计算高度为
23px


p{线高：20px；}
小{字体大小：6px；}
一些正常大小的文本

一些小尺寸文本
您可以为
行高
使用相对值。在您的例子中，基本字体大小是16px，因此以相对单位表示的20px行高将是
1.25


p{线高：1.25；}
一些正常大小的文本

一些小文本
Josh Crozier发布的答案的替代方案是将小行高度全部重置：


p{线高：20px}
小{行高：初始；}
一些正常大小的文本

一些小尺寸文本
发生这种情况是因为小标签的字体大小：小标签和p标签的字体大小比小标签大，所以小标签和p标签的差异造成了这个问题。当你们把小标签放入p标签时，然后增加高度，因为小标签占用的空间比p标签小

要解决此问题，必须为小标记19px指定行高度，如下所示：


p{线高：20px}
小{行高：19px}
一些正常大小的文本

一些小文本
好的，您刚刚找到了解决问题的方法。值得称赞的是：）。但是与顶部对齐的
文本看起来仍然很奇怪。另外，我仍然不太明白下面发生的事情的原因和机制。@TomPažourek-我看到了你在这个问题上增加的悬赏，我本来打算回答的，但后来我意识到我差不多三年前就已经回答了。。这太疯狂了！我只是添加了一个正式的解释来澄清实际发生的事情。。。我现在的经验比三年前多一点，所以希望这会有所帮助；）是的，我只是在某处再次注意到这个问题，并认为它应该得到适当的解释。再次感谢您的详细回答：）看起来很棒。我会把这个问题保留一段时间，但看起来你会赢得赏金这是一个很好的问题和很好的答案的组合，我已经很久没看到了。这个问题我想了很久，但无法解释。谢谢你们两位：）@JoshCrozier今天我又详细地读了一遍你们的答案，但我仍然不明白所有的事情。我会一直关注您，直到
垂直对齐
解决方案，但最后三个
行高
解决方案仍然涉及一些我不太了解的内容。我将文本包装成两行，第二段只包含
文本，行高为17px。我不明白的是，为什么这两个段落的高度仍然是相等的40px。不知何故，我假设如果
将行高度设置为17px，那么它的高度将仅为34px。这真的很神秘。如果用
span
元素替换
small
元素，并使用不同的字体大小进行测试，您会注意到，任何小于父元素字体大小（甚至是一个像素）的内容都会使父元素高出21px，而大于19px的字体大小则不会这样做（高度保持在20px）。
(20px - 13px) / 2 =  3.5px

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