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

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

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

К свойствам обтекания относятся float и clear. Эти свойства широко используются в современных HTML-документах, оптимизированных для поисковых систем (см. раздел 7). Они отвечают за обтекание блоков текста и элементов.

Свойство float может иметь одно из следующих значений: left, right или none (значение по умолчанию). Это свойство устанавливает правило обтекания – справа от объекта (значение left) или слева от объекта (значение right).

Свойство clear отменяет обтекание для текущего элемента, при этом может принимать одно из следующих значений: left, right, both и none (значение по умолчанию). Соответственно, значение left отменяет обтекание справа, а значение right – обтекание слева, значение both отменяет обтекание с обеих сторон.

Свойство margin определяет внешний отступ для элемента по четырем сторонам: вверху, внизу, слева и справа. При этом он может быть задан по частям, используя свойства margin-top, margin-bottom, margin-left и margin-right. Существует также сокращенная запись внешних отступов по сторонам. Рассмотрим несколько примеров:

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

margin: 10px;

margin-top: 10px;

margin: 10px 20px 30px 40px;

margin: 10px 20px 30px;

margin: 10px 20px;

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

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

}

Дата добавления: 2014-12-16