Я создал <div> с некоторым текстом. Я устанавливаю ширину и дополнение <div> и размер шрифта внутри него. Ниже приведен фрагмент, суммирующий конфликт:
.container {
width: 300px;
padding: 10px;
font-size: 16px;
}<div class="container">
Hello
</div>Дополнительная высота вызвана свойством line-height.
Начальное значение line-height равно normal.
Это, в соответствии со спецификацией, сообщает браузерам установить значение до 1,2. Это дает текст немного вертикальной прокладки внутри строки.
Чтобы устранить проблему, просто добавьте line-height: 1 в свой код.
Браузеры реализуют высоту строки по умолчанию для текста. Таким образом, в этом случае есть 1 пиксель ниже и выше текста. Вы можете изменить это, установив line-height: 16px;