Почему CSS-свойство 'line-height' не позволяет мне создавать узкие пространства в Chrome?

У меня есть тег абзаца, который я определил в другом месте с высотой строки 15px, и у меня есть еще один тег абзаца дальше по странице, где я хочу сделать высоту линии около 10 пикселей. Забавно, что это не позволит мне перейти на 10 пикселей или что-то меньшее, чем это, но когда я установил его на 25 пикселей или выше, свойство line-height, похоже, работает.

Я проверил соответствующий CSS (все ручные) с помощью средств веб-разработчиков браузера Chrome (версия Firefox Firefox Firebug) и не смог найти ничего подходящего. Есть ли общая ошибка CSS, которая мешает мне сокращать высоту линии за пределами определенной минимальной суммы?

Ответ 1

line-height относительно размера шрифта, вы не можете идти ниже, если вы не объявите отрицательный запас.

Ответ 2

Я заметил как в Firefox, так и в Chrome, что если вы установите для типа HTML5 минимальную высоту строки для встроенных элементов. Для блочных элементов вы можете установить высоту линии так, как хотите, даже чтобы линии перекрывались.

Если вы не устанавливаете тип документа HTML5, минимальная высота строки для любого из блоков или встроенных элементов отсутствует.

Ответ 3

Я столкнулся с той же проблемой, хорошо работал с:

.element { display: block; line-height: 1.2; }

Ответ 4

После тестирования этого в IE 8-11, Firefox 38.0.1 и Chrome 43, поведение одинаковое: встроенные элементы имеют минимальную высоту строки, и они не будут ниже. Похоже, эта минимальная высота исходит из CSS spec:

В элементе блочного контейнера, содержимое которого составлено из элементов линейного уровня, "line-height" задает минимальную высоту строк строки внутри элемента. Минимальная высота состоит из минимальной высоты над базовой линией и минимальной глубины ниже ее, точно так же, как если бы каждая линейная коробка начиналась с встроенной коробки с нулевой шириной со свойствами шрифта элемента и высоты строки. Мы называем это мнимое поле "стойкой".

Если вы хотите сохранить некоторые преимущества встроенных элементов, вы можете использовать display: inline-block. Вы также можете использовать display: block. Обе версии позволят вам сделать высоту линии во всех браузерах, которые вы тестировали.

Два связанных вопроса для большего чтения:

почему высота строки span бесполезна

У браузера, похоже, минимальная высота строки на этом блоке, который содержит текст. Почему?