CSS: почему уменьшение размера шрифта смежного встроенного элемента увеличивает общее преимущество?

Question

У меня есть элемент, который содержит два тега span, каждый из которых содержит некоторый текст. Элемент контейнера устанавливает размер шрифта, затем размер шрифта во втором теге span устанавливается на меньший размер. Когда второй размер шрифта уменьшается, пространство между строкой и следующим элементом блока увеличивается. Это происходит как в WebKit, так и в Gecko.

Элемент контейнера p имеет { margin-bottom: 0; padding-bottom: 10px; }, а его следующий брат имеет { margin-top: -5px; }

Следующее изображение иллюстрирует ситуацию и содержит снимок соответствующей части структуры документа в FireBug.

Почему расстояние под тегом p увеличивается после уменьшения размера шрифта второго тега span?

Answer 1

Я предполагаю, что у вас (относительно) большая высота строки наследуется этим десятичным промежутком (возможно, 32 пикселя?), И когда вы уменьшаете размер шрифта до 18 пикселей, вы получаете ситуацию, когда базовая линия десятичного числа глифы совпадают с недесятичными глифами, но строка все равно должна занимать всю указанную высоту строки. Таким образом, дополнительное пространство добавляется ниже базовой линии.

Добавьте правило высоты строки, и я уверен, что это исчезнет:

.box .value > .decimal { line-height: 18px; }