Почему line-height в % срабатывает не так как нужно?

Question

[Norwood]

Добрый день.
При сжатии текста и переносе его на 2-ю строчку отступ получается не правильный.
Если отключить line-height, то всё работает корректно.
Подскажите, есть ли смысл использовать line-height при тексте в одну строчку?
Вот как выглядит он в одну строчку:

Вот как выглядит его перенос:

стили:

.subtitle {
  flex: 0 1 100%;
  line-height: calc(18 / 80 * 100%);
  text-align: center;
  font-size: 1.2rem;
  color: $colorGrayLight;
  padding: 40px 0 80px 0;
}

Comments

[Lynn «Кофеман»]

А зачем он тут вообще?

[Norwood]

Lynn «Кофеман», вот я не знаю, для одной строчи нужно ли его задавать?

[Михаил]

18 и 80 чего?

[Norwood]

Михаил,

[Ankhena]

Заметно более выгодный способ - задавать line-height коэффициентом, без указания единиц измерения.
Тогда никто никуда не уедет, а дочерние элементы с другим размером шрифта получат пропорциональное между строчное расстояние, без указания его снова.

https://learn.javascript.ru/font-size-line-height

css-live.ru/css/metriki-shrifta-line-height-vertic...

https://jsfiddle.net/Ankhena/dnfu54cv/

Answer 1

[y0u]

Если предположить что у тебя корневой размер шрифта это 16px,
то у элемента subtitle размер шрифта 16 * 1.2 = 19.2px.
В итоге line-height твой равен 0.225 * 19.2 = 4.32px

Больше про line-height можно почитать здесь:
https://developer.mozilla.org/ru/docs/Web/CSS/line...

Comments

[Norwood]

корневой размер по макету 15px
Я понимаю, что отступ маленький получается. Но ведь смысл использования line-height в % в том, что он вроде как должен рассчитываться с учётом переноса на новую строчку? Что даёт гибкость в моб. вёрстке.
Какой смысл рассчитывать его в % если я укажу, например в px и результат будет тот же?

[y0u]

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

[Norwood]

y0u, понял, спасибо! А есть ли какой-нибудь метод для расчёта line-height под мобильную вёрстку? Или это руками лучше править?

[y0u]

Norwood,

А есть ли какой-нибудь метод для расчёта line-height под мобильную вёрстку

что это значит? чем line-height на десктопе отличается от мобильной версии?

[Norwood]

y0u, я не знаю, если честно :(

[y0u]

Norwood, оставь line-height по умолчанию и не парься тогда.

[Norwood]

y0u, спасибо!

[Ankhena]

Norwood,

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

Заметно более выгодный способ - задавать line-height коэффициентом, без указания единиц измерения.
Тогда никто никуда не уедет, а дочерние элементы с другим размером шрифта получат пропорциональное между строчное расстояние, без указания его снова.

https://learn.javascript.ru/font-size-line-height

css-live.ru/css/metriki-shrifta-line-height-vertic...

https://jsfiddle.net/Ankhena/dnfu54cv/