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

Свойство 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;

}

Свойства отображения

Свойства display и visibility являются свойствами отображения.

Свойство display весьма универсально, оно определяет, должен ли элемент быть показан в документе, и если да, то каким образом. Он отличается от visibility тем, что при заданном значении none не резервирует пустое пространство под элементом, а временно удаляет его из документа. Свойство visibility, в свою очередь определяет лишь то, будет элемент показан или нет. При этом, даже если элемент не отображается (указано значение hidden), для него все равно будет зарезервировано пустое место.

Свойство visibility имеет три допустимых значения: inherit (значение по умолчанию), visible и hidden.

Свойство display имеет гораздо больше допустимых значений. Стандарт CSS 2.1 просто изобилует этими значениями, однако чаще всего используются следующие: none, inline, block, table, table-row, table-cell. Первое значение делает элемент неотображаемым, второе – элемент отображается как строчный (или инлайновый), третье – элемент отображается как блочный. Четвертое – элемент отображается, как таблица, пятый – строка таблицы, шестой – ячейка таблицы. Варианты 4-6 не поддерживаются в Internet Explorer 6.0.

Очень важно понимать разницу между блочным, инлайновым и табличным элементом.

Свойства размера

CSS-свойства width и height говорят сами за себя – они определяют размер элемента, т.е его ширину и высоту. Значения для этих свойств задаются в любых единиицых измерения длины или в процентах (см. 5.4). При этом необходимо помнить об особенностях модели отображения блочных элементов. Эта тема обсуждается в разделе 6.2.2.

Свойства позиции

В этом разделе мы рассмотрим свойства, касающиеся позиционирования элементов, которые были определены в стандарте CSS 2, это position, left, right, top, bottom и z-index.

Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других объектов документа. На практике часто используются два его значения: relative и absolute.

В случае relative, заданного в качестве значение, положение элемента устанавливается относительно родителя. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от родителя, в зависимости от применяемых значений этих свойств (в том числе и отрицательных).

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

Абсолютно позиционированные элементы могут накладываться друг на друга в документе, имитируя тем самым третье измерение, перпендикулярное экрану, или так называемую ось Z. Для решения конфликта взаимного расположения абсолютно позиционированных элементов и их наложения друг на друга, существует CSS-свойство z-index. Оно принимает любое целочисленное значение, положительное или отрицательное. Большее значение означает отображение элемента поверх всех остальных, т.е. выше по оси Z, меньшее – ниже.

Абсолютное позиционирование элементов следует применять только в случаях крайней необходимости и не следуем им злоупотреблять.

Свойства переполнения

Свойство overflow управляет содержанием блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Допустимые значения: auto, hidden, scroll и visible (значение по умолчанию). Значение visible означает, что содержимое элемента будет отображаться даже за пределами установленной ширины и высоты. В случае hidden содержимое, которое не помещается в установленные размеры элемента, отображаться не будет. Значение auto говорит о том, что в случае, когда содержимое элемента выходит за его пределы, все что не попадает в указанный размер отображаться не будет, однако есть возможность их просмотра при помощи полос прокрутки, которые появятся там, где это необходимо. В случае scroll, полосы прокрутки будут всегда отображаться, вне зависимости от того, выходит ли содержимое за пределы установленного размера элемента.