Тег<small> разрушает вертикальное выравнивание

Question

Я настроил вертикальное выравнивание, используя то же значение line-height, вертикальные поля и отступы, но когда есть меньший элемент, такой как <small> тег, внутри потока, он разрушает для некоторых пикселей вертикальный ритм, я могу решить, добавив вертикальное выравнивание: верх / низ, но элемент не выровнен с другим текстом, вы можете добавить U display:inline-block а также transform:translateY(1px) чтобы решить другую проблему, но это не элегантное решение. Есть ли другие решения? И мне интересно, почему меньшие тексты так работают.

Я связал фотографию, чтобы сделать ее более понятной.

Благодарю.

screenshoot

Answer 1

Кажется, это работает без нарушения вертикального выравнивания:

p small {
    line-height: 100%;
}

Answer 2

Если вы хотите, чтобы ваши строки текста всегда имели одинаковую высоту, чтобы они соответствовали вашему фону, используйте line-height имущество.