Почему я не могу уменьшить высоту строки этого текста?

http://jsfiddle.net/mJxn4/

Это очень странно: у меня есть несколько строк текста, заключенных в тег <em>. Независимо от того, что я делаю, снижение значения line-height ниже 17px не влияет. Я могу поднять line-height до более чем 17px, и он будет применяться, но я не могу получить его ниже 17px.

Спрашиваемый CSS:

#others .item em {
    font-size: 13px;
    line-height: 17px;
}

Попробуйте настроить высоту линии как выше, так и ниже и запустить обновленную скрипту после каждого изменения, и вы увидите, что я имею в виду.

Зачем это было? Нет line-height указывается где-либо еще в CSS, поэтому ничто не отменяет его. В любом случае это не может быть так, потому что я корректирую line-height вверх и вниз в пределах одного и того же селектора, поэтому не имеет смысла, что более высокое значение будет применяться, но меньшее значение будет отменено.

Ответы

Ответ 1

Поскольку тег em является строковым, а его высота строки не может быть ниже его родительского div.

Например, если вы установите высоту строки родителя на 10px, вы также сможете уменьшить высоту строки тега em до 10px.

Ответ 2

Я столкнулся с этой проблемой с помощью divs в мобильном режиме - высота линии была слишком большой, а линейная высота не работала! Мне удалось заставить его работать, добавив "display: block", за советом здесь: Почему не свойство CSS 'line-height' позволяет мне создавать узкие пространства в Chrome?

Надеюсь, что это поможет кому-то еще столкнуться с одной и той же проблемой в будущем

Ответ 3

Чтобы свойство line-height работало, div должен иметь свойство отображения, равное блоку

.app-button-label{
    line-height: 20px;
    display: block;
 }

Ответ 4

Кажется, вы используете опцию normalized css в jsfiddle - , которая соответствует правилам CSS reset - ala http://meyerweb.com/eric/tools/css/reset/

Вы можете либо reset reset, либо использовать другой reset, если вам это действительно нужно.

Подробнее см. здесь:

http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

Ответ 5

Лучший способ сделать это - использовать css reset.

Напишите свой собственный или используйте популярный, например

http://meyerweb.com/eric/tools/css/reset/

Ответ 6

Самый простой способ - указать высоту строки с более высоким приоритетом, например, вы можете написать: line-height: 14px! important;

Если он все еще не работает, установите приоритет как в том месте, где вы хотели бы уменьшить высоту строки (встроенный css), так и поместить в тело css.. помните высокий приоритет (! important;), поскольку он переопределяет любые другие неизвестные правила css.

Надеюсь, что это поможет

Ахмед