Книга: JavaScript. Подробное руководство, 6-е издание

16.2.2. Рамки, поля и отступы

16.2.2. Рамки, поля и отступы

Стандарт CSS позволяет задавать поля, рамки и отступы для любого элемента. Рамка элемента - это прямоугольник, обрисованный вокруг (полностью или частично) этого элемента. CSS-свойства позволяют задать стиль, цвет и толщину рамки:

border: solid black 1px; /* рамка рисуется черной сплошной линей,*/
                         /* толщиной 1 пиксел */
border: 3рх dotted red;  /* рамка рисуется красной пунктирной линией */
                         /* толщиной 3 пиксела */

Толщину, стиль и цвет рамки можно задать с помощью отдельных CSS-свойств, а также отдельно для каждой из сторон элемента. Например, чтобы нарисовать линию под элементом, достаточно просто определить свойство border-bottom. Можно даже задать толщину, стиль и цвет рамки только для одной стороны элемента с помощью таких свойств, как border-top-width и border-left-color.

В CSS3 можно закруглить все углы рамки, определив свойство border-radius, или отдельные углы, задействовав более конкретные свойства. Например:

border-top-right-radius: 50рх;

Свойства margin и padding задают ширину пустого пространства вокруг элемента. Отличие (очень важное) заключается в том, что свойство margin задает ширину пустого пространства снаружи от рамки, между рамкой и окружающими элементами, а свойство padding - внутри рамки, между рамкой и содержимым элемента. Поля (margin) позволяют визуально отделить элемент (возможно, окруженный рамкой) от соседних элементов в нормальном потоке вывода документа. Отступы (padding) позволяют визуально отделить содержимое элемента от его рамки. Если элемент не имеет рамки, определять ширину отступов обычно не требуется. Если элемент позиционируется динамически, он выпадает из нормального потока вывода документа, и для него не имеет смысла определять ширину полей.

Поля и отступы элемента задаются с помощью свойств margin и padding:

margin: 5рх; padding: 5рх;

Можно также определить поля и отступы для каждой из сторон элемента в отдельности:

margin-left: 25рх; padding-bottom: 5рх;

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

padding: 1рх 2рх 3рх 4рх;
/* Предыдущая строка эквивалентна четырем следующим. */
padding-top: 1рх;
padding-right: 2рх;
padding-bottom: 3рх;
padding-left: 4рх;

Порядок работы с атрибутом margin ничем не отличается.

Оглавление книги