Книга: HTML, XHTML и CSS на 100%

Границы

Границы

Для задания границ вы можете использовать следующие свойства: border, border-collapse и border-spacing.

Свойство border задает стиль границы и размер. Стили границ будут подробно рассмотрены в следующих разделах. Размер границы задается целым числом и с указанием единицы измерения.

Свойство border-collapse позволяет выбрать модель границ таблицы. Значение separate задает модель с отдельными границами. Значение collapse задает модель с пересекающимися границами.

Свойство border-spacing может принимать сразу два значения длины. Заданная длина обозначает расстояние между границами соседних ячеек. Если указана одна длина, то она определяет расстояние по горизонтали и по вертикали. Если указаны оба значения, то первое определяет расстояние по горизонтали, а второе – по вертикали. Естественно, длины не могут быть отрицательными.

Рассмотрим простой пример задания границы для таблиц на странице:

table { border: outset 10pt;

border-collapse: separate;

border-spacing: 15pt }

td { border: inset 5pt }

Этот CSS-код создаст вокруг таблицы выпуклую границу размером 10 пунктов. Поскольку задано значение separate свойства border-collapse, то для ячеек будут созданы вдавленные границы размером 5 пунктов. Расстояние между ячейками будет составлять 15 пунктов.

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