Высота строки: line-height

line-height

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.01 1.0 4.01 7.0 1.01
Мобильные браузеры Android Firefox Mobile IE Mobile Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 1.01 1.0 (1) 6.01 6.0 1.01

1Ни Webkit (движок Chrome, Safari) ни Trident (движок IE) не реализуют правильное поведение с такими линейными элементами как кнопки. Это является некорректным поведением по отношению к спецификации.

Свойство
line-height — это свойство определяет высоту строки
Наследование
Наследуется. Это значит что стили применённые к родительскому элементу передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
число | значение в абсолютных единицах | значение в относительных единицах | normal | inherit
Значение по умолчанию
normal
Правила записи

свойство: значение;

Если в значении указывается число, то это число умножается на размер текущего шрифта

Примеры

Определение базовой линии

Определение высоты строки

Так высоту строки видят браузеры

line-height: 1.5; Высота строки = 1,5 * [размер шрифта]; если шрифт равен 10px, то высота строки будет 15px, 5px распределится поровну, то есть выше строки текста отложится 2.5px, и ниже строки текста отложится 2.5px
line-height: 10px; Высота строки = 10px, этот размер распределится поровну, т.е. выше строки текста отложится 5px, и ниже строки текста отложится 5px
line-height: 2em; Высота строки = 2 * [размер шрифта]; если шрифт равен 14px, то высота строки будет 28px, 14px распределится поровну, то есть выше строки текста отложится 7px, и ниже строки текста отложится 7px
line-heigth: 150%; Предположим что размер шрифта 12px, тогда высота строки = 12px * 150% / 100% = 18px, таким образом 6px распределится поровну, то есть выше строки текста отложится 3px, и ниже строки текста отложится 3px
line-height: inherit; Это значит что высота строки наследует значение от родителя
Поделиться