Свойства внутреннего отступа

Свойство padding определяет отступ внутри элемента по четырем сторонам: вверху, внизу, слева и справа. Аналогично свойству margin (см. 5.5.9), CSS-свойство padding может быть задано по частям, используя padding-top, padding-bottom, padding-left и padding-right. Сокращенная запись внутренних отступов по сторонам также похожа на аналогичную для свойства margin.

Внутренний отступ

padding: 10px;

padding-top: 10px;

padding: 10px 20px 30px 40px;

padding: 10px 20px 30px;

padding: 10px 20px;

Первая запись в примере определяет отступ внутри элемента, равный 10 пикселям по всем четырем сторонам. Вторая запись определяет внутренний отступ сверху, равный 10 пикселям. Следующая запись определяет отступ сверху 10 пикселей, справа – 20 пикселей, внизу – 30 пикселей, слева – 40 пикселей. В сокращенной записи отступа направления перечисляются начиная сверху и далее по часовой стрелке, т.е. справа, внизу, а затем слева. Четвертая запись определяет внутренний отступ сверху, равный 10 пикселям, слева и справа – 20 пикселей, внизу – 30 пикселей. Последняя запись задает отступ сверху и снизу по 10 пикселей, слева и справа – по 20 пикселей.

О том, как влияет величина внутреннего отступа на ширину отображаемого элемента, а также другие особенности модели отображения блочных элементов смотрите в разделе 6.2.2.

Свойства таблицы

В данном разделе мы перечислим некоторые свойства таблицы, а именно table-layout и border-collapse.

Свойство table-layout определяет каким образом браузер должен вычислять размер ячеек таблицы. Оно принимает одно из двух допустимых значений: auto (значение по умолчанию) и fixed. Режим auto работает по умолчанию.

Если свойство table-layout таблицы имеет значение fixed, то ширина колонок в этом случае определяется либо с помощью элемента col (крайне редкий вариант), либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы, по каким-либо причинам, получить невозможно, в этом случае, таблица делится на колонки равной ширины. Причем размер ячеек такой таблицы никогда не будет превышать установленные размеры, в отличие от таблицы со значением auto, когда в ячейку помещен какой либо элемент превышающий установленный размер ячейки, например большое изображение или длинный неразрывный текст. Другим преимуществом таблицы со значением fixed является более быстрая скорость отображения таблицы, так как в этом случае браузеру нет нобходимости ждать догрузки других элементов документа, входящих в таблицу, для определения ее размеров. Тем не менее, не стоит злоупотреблять использованием значения fixed для table-layout. Его нужно применять только в случаях необходимости.

Свойство border-collapse может принимать одно из следующих значений: separate (значение по умолчанию) и collapse. Это свойство определяет, как браузер должен отображать границы вокруг ячеек таблицы. Значение separate говорит о том, что вокруг каждой ячейки отображается своя собственная рамка, соответственно в местах соприкосновения ячеек показываются сразу две линии. Значение collapse объединяет границы между ячейками в одну, что позволяет отобразить равномерную сетку для таблицы. Пример, приведенный ниже, показывает, как может быть получена такая сетка для всех таблиц документа.

Отображение сетки для таблицы

table {

border-collapse: collapse;

}

td {

border: 1px solid #000;

}