CSS высота + высота строки + размер шрифта

Question

У меня есть простой div, и я хотел бы иметь высоту div в качестве его размера шрифта содержимого. Поэтому я попытался установить одинаковые значения высоты, line-height и font-size, но кажется, что высота элемента не ожидается 150px. Вы можете видеть это на экране ниже. Это заголовок в красной рамке.

Как добиться, чтобы шрифт был такой же высоты, как и высота блока?

Answer 1

Так что проблема в том, что шрифты всегда содержат пробелы сверху и снизу. Это основано на шрифте и не указано где-то. Поэтому лучше всего будет выбрать правильный размер шрифта, а затем отрегулировать высоту строки, чтобы получить желаемый результат.

Ответ на тот же вопрос, который вы можете получить здесь

Небольшой взлом для удаления верхнего и нижнего пространства здесь

Answer 2

вы можете попробовать следующее решение с CSS.

• 100px - желаемая высота
• 1.45 необходимо исправить для каждой семьи шрифтов.

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