<small>标签破坏垂直对齐

Question

我使用相同的值行高，垂直边距和填充设置了垂直对齐，但是当流中有一个较小的元素（如<small>标记）时，它会丢弃某些像素的垂直对齐节奏，我可以解决添加vertical-align：top / bottom但元素没有与其他文本对齐，U可以添加display:inline-block和transform:translateY(1px)来解决其他问题，但这不是一个优雅的解决方案。还有其他解决方案吗？而且我想知道为什么较小的文本就是这样的。

我将照片链接起来以便更清楚。

感谢。

screenshoot

Answer 1

如果您希望文本行始终具有相同的高度，以便它们与您的背景相匹配，请使用line-height属性。

Answer 2

这似乎可以在不破坏垂直对齐的情况下工作：

p small {
    line-height: 100%;
}