У меня есть простой div, и я хотел бы иметь высоту div в качестве размера шрифта содержимого. Поэтому я попытался установить высоту, высоту строки и размер шрифта на одно и то же значение, но кажется, что высота элемента не ожидается 150 пикселей. Вы можете видеть это на экране ниже. Это заголовок в красной рамке.
Как добиться, чтобы высота шрифта соответствовала высоте его поля?
Итак, проблема в том, что шрифты всегда содержат пробелы сверху и снизу. Это основано на шрифте и нигде не указано. Поэтому лучше всего использовать правильный размер шрифта, а затем уменьшать высоту строки, пока не получите желаемый результат.
Ответ на тот же вопрос вы можете получить элемент">здесь
Небольшой хак для удаления верхнего и нижнего пространства: >здесь
вы можете попробовать следующее решение с помощью CSS.
HTML:
<div class="container">
Stackoverflow
</div>
CSS:
.container {
display: flex;
align-items: center;
background-color: #222222;
color: #f7f7f7;
text-transform: uppercase;
height: 100px;
font-size: calc(100px * 1.45);
}
Тестовая ссылка: https://codepen.io/shervinmr/pen/wvaaEvg
