@Dubrovin

Как скалькулировать вертикальный отступ у кнопки?

Есть кнопка (div), которая должна быть определённой высоты (например, 40px) и есть текст внутри кнопки (span), у которого задан размер шрифта + высота строки.
Как правильно посчитать вертикальные отступы у текста внутри кнопки, чтобы она была необходимой высоты.
Решение в лоб:
padding: calc( (var(--height) - var(--line-height-em) )/2) 0;
работает не так, как нужно из-за особенностей округления шрифта:
например, шрифт 17px с line-height 1.4em должен занимать высоту 23.8px, но калькулируется браузером (chrome, firefox) как 23px (округление в меньшую сторону) в то время как отступы калькулируются точно с сохранением дробных значений.
На скриншоте prnt.sc/slr5c3 кнопка высотой 40px, высота строки 1.4, текст 17px
Высота текста с отступами считается как 23px + 2 * (40px - 23.8px)/2 = 39.2px
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ответы на вопрос 1
arsenty
@arsenty
Full Stack Designer
Я вам сочувствую :), если вам приходится такими подсчётами заниматься. Всё могло бы быть проще:
padding: 1em;
font-size: 1em;
line-height: 1em;

Итого, высота кнопки: 3em;

Когда нужен другой размер кнопки (шрифт + отступы):
font-size: 1.5em;

PS: а если получается так, что текст кнопки не умещается в одну строку, то это неправильная кнопка.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы