CSS резервирует неизвестное пространство в полевой модели

Я создал <div> с некоторым текстом. Я устанавливаю ширину и дополнение <div> и размер шрифта внутри него. Ниже приведен фрагмент, суммирующий конфликт:

.container {
  width:     300px;
  padding:   10px;
  font-size: 16px;
}

<div class="container">
  Hello
</div>

Ответ 1

Дополнительная высота вызвана свойством line-height.

Начальное значение line-height равно normal.

Это, в соответствии со спецификацией, сообщает браузерам установить значение до 1,2. Это дает текст немного вертикальной прокладки внутри строки.

Чтобы устранить проблему, просто добавьте line-height: 1 в свой код.

Ответ 2

Браузеры реализуют высоту строки по умолчанию для текста. Таким образом, в этом случае есть 1 пиксель ниже и выше текста. Вы можете изменить это, установив line-height: 16px;