Свойство border-top, border-right, border-bottom и border-left

Все они - стенографические свойства, представляющие собой обобщения для задания свойств border-width, border-style и border-color соответствующих сегментов границы блока. Например:

Р { border-top: 1px solid red; border-right: 2px solid red; border-bottom: 1px solid red; border-left: 2px solid red }

Границы вокруг абзаца будут красными, проведенными сплошной линией. Сверху и снизу толщина границ 1 пиксель, справа и слева - 2 пикселя.

Свойство border

Это свойство является стенографическим и используется для одновременного задания параметров всех четырех сегментов границы: ширины, цвета и стиля. В отличие от стенографических свойств margin и padding, свойство border не может устанавливать различные значения для отдельных сегментов границы. Чтобы это сделать, необходимо использовать другие свойства границы, а именно border-top, border-right, border-bottom и border-left.

P { border: 1px solid red; }

Граница вокруг этого абзаца будет одинаковой со всех четырех сторон: сплошная линия красного цвета толщиной 1 пиксель.

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

Свойства padding-top, padding-right, padding-bottom, padding-left

Индивидуальные свойства, позволяющие задать размеры отступов для каждой стороны в отдельности.

• padding-top - ширина верхнего поля.

• padding-right - ширина правого поля.

• padding-bottom - ширина нижнего поля.

• padding-left - ширина левого поля.

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

Свойства padding

Это стенографическое свойство используется для краткой записи значений свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding может иметь одно, два, три или четыре значения. Значения присваиваются также, как для полей и границ. Рассмотрим такой код:

Р { background-color:#FFC; border:1px solid blue; padding:0.5em 1em; }

1.4. Отступы

Ha примере этого абзаца рассмотрим, как работают отступы. В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0,5 em сверху и снизу и по 1 em слева и справа.

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

В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0,5 em сверху и снизу и по 1 em слева и справа

В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0 em сверху, снизу, слева и справа

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

Различные отступы для отдельных сторон блока можно задавать при помощи именных свойств:

Р { padding-top: 0.5em; padding-right: 10рх; padding-bottom: 3%; padding-left: 1em; }

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