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

Question

[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

Comments

[Eduard07]

А какая задача стоит конкретно ?

[Dubrovin]

Eduard07, конкретная задача - сделать вертикальные отступы у кнопки такими, чтобы она стала необходимой высоты, если текст в кнопке будет переноситься на другую строку, то вертикальные отступы у текста не должны меняться, т.е. у кнопки задан конкретный min-height.

[Eduard07]

Dubrovin, а нельзя задать например align-items: center или align-vertical:middle ? Зачем самому считать высоту ?

[Dubrovin]

Eduard07, конечно же, выравнивание по центру задано. Если текст в кнопке будет переноситься по строкам и не будет вертикального отступа у текста, то он примкнёт к границам кнопки.

[Eduard07]

Dubrovin, да, но и отступы тоже задать

[Dubrovin]

Eduard07, да, отлично, в этом и проблема)) какие именно отступы задать, чтобы если текст в одну строку, то кнопка по высоте была ровно 40px, например

[Eduard07]

Dubrovin, а нужно переносить текст ?

[Dubrovin]

Eduard07, да, конечно, в кнопке может быть много текста и он не будет помещаться по ширине, или бывают кнопки с многострочным контентом, например prnt.sc/slsrjq

[Eduard07]

Dubrovin, не сталкивался с такими кнопками, если честно не знаю как правильно сделать, чтобы в 1 строку всегда 40px, а если в 2 то и отступы

Answer 1

[arsenty]

Я вам сочувствую :), если вам приходится такими подсчётами заниматься. Всё могло бы быть проще:
padding: 1em;
font-size: 1em;
line-height: 1em;

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

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

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

Comments

[Dubrovin]

Вы мыслите в правильном направлении, однако кнопка со шрифтом с высотой строки 1em - это частный случай, и кнопка с текстом в несколько строк (например, в две строки) вполне имеет место быть.