html - 标签破坏垂直对齐

Question

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

为了更清楚，我链接了一张照片。

screenshot

Answer 1

这似乎在不破坏垂直对齐的情况下起作用:

p small {
    line-height: 100%;
}