Блог

У меня простая проблема вертикального выравнивания сверху.

 <span class="pricing">
<span class="currency>
$
</span>
125
</span
 

Что я хочу сделать, так это выровнять знак $ с номером 125 сверху. Итак, я применяю текущий CSS

 .pricing {
    vertical-align: text-top;
}
.currency {
vertical-align: text-top;
}
 

Но когда я это делаю, знак $ выравнивается по вертикали до верха, а число — нет. Он по-прежнему выровнен по вертикали до середины. результат выглядит следующим образом:
Изображение цены

Я знаю, что для этого есть несколько обходных путей, например, позиционирование его абсолютным и добавление некоторого поля и преобразование, чтобы оно выглядело так, как я хочу. Но мне просто любопытно, почему это работает для класса currency, а не для класса pricing.