Свойство line-height

Расстояние между базовыми линиями двух соседних строк (высота строки) задается установкой значения свойства line-height. Числовое значение этого свойства определяет высоту строки, вычисляемую умножением размера шрифта текущего элемента на заданное число.

Примечание

Все текстовые свойства, кроме свойств text-decoration и vertical-align, наследуются элементами-потомками от родителей.

4. Блоки

Свойства этой категории устанавливают параметры блоковых элементов. Среди них можно выделить три больших группы, форматирующих блоки полей, границ и отступов, причем группу, работающую с границей, можно подразделить еще на четыре группы, устанавливающие значения цвета, стиля, ширины и одновременно всех перечисленных свойств границы. Все эти группы отличает то, что в них включены свойства для задания параметров верхних, нижних, правых, левых и одновременно всех четырех частей соответствующих блоков форматирования элемента.

Свойства поля

В группу форматирования поля входят свойства, устанавливающие ширину верхнего (margin-top), правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырех параметров поля элемента.

Ширина соответствующих полей задается значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0.

Если в свойстве margin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определено только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трех значений недостающие значения берутся из установок противоположных сторон. Например:

BODY {margin: 1em 2em} /* верх и низ = 1em, право и лево = 2em */

Свойства отступа

Ширина верхнего, правого, нижнего и левого отступа определяется значением, соответственно, свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding позволяет одновременно установить значения всех четырех отступов элемента. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству.

Свойства границы

Ширину верхней, правой, нижней или левой границы задают соответственно свойствами border-top-width, border-right-width, border-bottom-width и border-left-width. Значения свойства border-width определяют ширину границы элемента для всех перечисленных ее частей. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству.

Значениями этих свойств могут быть ключевые параметры thin, medium и thick или значение длины. Ширина границы, определяемая ключевыми параметрами, зависит от браузера. Единственное, что можно гарантировать, – это то, что ширина thin не больше ширины medium, которая, в свою очередь, не больше ширины thick.

Цвета частей границы задаются значениями свойств border-top-color, border-right-color, border‑bottom-color и border-left-color. Свойство border-color определяет цвета всех частей границы. Четыре параметра цвета подчиняются все тем же правилам, описанным при задании полей элемента. Если задан тип границы (см. ниже), но не задан цвет границы, то по умолчанию используется цвет самого элемента.

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

Для задания типа любой из четырех частей границы применяются свойства border-top-style, border‑right-style, border-bottom-style и border-left-style. Свойство border-style определяет одновременно типы всех частей границы. Значениями этих свойств могут быть ключевые параметры none, solid, double, groove, ridge, inset, outset. Типы границ, соответствующих всем перечисленным значениям, представлены в таблице 5.

Таблица 5 Типы линий границы

Ключевой параметр	Тип границы
none	Граница не отображается (несмотря на значение свойства 'border-width')
solid	Граница отображается сплошной линией
double	Граница отображается двойной линией (сумма толщины двух линий и промежутка между ними равна значению свойства 'border-width')
groove	Граница отображается, как будто она вдавлена в лист ("желобок")
ridge	Граница отображается, как будто она выдавлена из листа ("барельеф")
inset	Весь блок элемента отображается, как будто он вдавлен в лист
outset	Весь блок элемента отображается, как будто он выдавлен из листа ("барельеф")

Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left определяют ширину, тип и цвет, соответственно, верхней, правой, нижней и левой границы. Свойство border определяет одновременно параметры всех частей границы. В отличие от аналогичных свойств, задающих параметры полей и отступов, данное свойство устанавливает одинаковые значения для всех частей границы.