CSS уроки, 4 часть: блочная модель, рамки, границы, отступы

CSS: блочная модель

Создание фреймов, внутренних отступов и расстояний между отдельными элементами HTML-страниц называется блочная модель  (box model). Каждый элемент HTML может быть представлен как сложный, в своем собственном блоке, который имеет следующие компоненты:

• поле (margin): внешняя часть блока, бесцветная и прозрачная. Чем больше граница, тем больше расстояние до соседних элементов.
• рамка (border): окружает содержимое и внутренние отступы.
• внутренний отступ (padding) : расстояние между содержимым поля (самого элемента) и рамкой. В отличие от границы, внутренний отступ может быть цветным – определяется цветом фона рамки.
• контент (content): фактическая часть поля, сам элемент – рисунок, таблица, текстовое поле и т. д.

Как работает блочная модель

Определение ширины и высоты элемента

Когда вы указываете ширину и высоту элемента с помощью width и height, вы указываете только размер содержимого. Размер всего блока также зависит от границы, рамки и внутреннего отступа.

Например, пусть для элемента указываются следующие параметры:

width:200px;

padding:20px;

border:2px solid blue;

margin:15px;

Для этого блока ширина будет 200 (содержимое) + 2 * 20 (левый и правый внутренний отступ) + 2 * 2 (левая и правая граница) + 2 * 15 (левая и правая граница) = 274 пикселей.

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

Блочная модель и Internet Explorer

Большинство браузеров рассчитывают размеры блоков, как было описано выше. Одним заметным исключением является Internet Explorer – для этого браузера ширина включает рамки border и отступы padding. По этой причине элементы, которые определены шириной width, будут казаться уже, чем в других браузерах. То же самое относится и к высоте height.

Однако, решение проблемы очень простое: достаточно указать DOCTYPE для документа HTML, и Internet Explorer будет соответствовать общепринятому методу использования метода блочной модели.

CSS рамки (border)

CSS border команды дают возможность определить вид рамки: тип, цвет и толщина.

Вид рамки

Команда вида рамки задается с помощью border-style и может принимать следующие значения:

• none: без рамки
• dotted: рамка, сделанная из точек
• dashed: рамка – пунктирная линия
• solid: рамка сплошной линией
• double: рамка двумя сплошными линиями
• groove: трехмерная вогнутая рамка
• ridge: трехмерная вогнутая рамка
• inset: трехмерная объемная рамка, обращенная внутрь
• outset: трехмерная объемная рамка, обращенная наружу

Толщина рамки

Свойство толщины рамки задается с помощью border-width, а значение можно указывать как цифрами (в пикселях), так и одним из следующих слов: thin, medium, thick, которые браузер будет интерпретировать автоматически, чтобы создать соответственно узкую, нормальную или толстую рамку. Обратите внимание, что border-width будет эффективно реализован, только если уже указан тип рамки (border-style).

Цвет рамки

Чтобы установить цвет рамки используется border-color. Аналогично цвету текста, сами значения для цвета рамки могут быть:

• название цвета, например olive или red;
• RGB значение, например rgb(0,255,0)
• HEX значение, например #00FF00

Указание цвета рамки будет действительным, только если указан вид рамки (border-style).

Индивидуальные стили для отдельных сторон рамки

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

• border-top-style (верхняя рамка)
• border-right-style (правая рамка)
• border-bottom-style (нижняя рама)
• border-left-style (левая рамка)

Аналогичным образом устанавливаются значения цвета и толщины для отдельных сторон: замените стиль на цвет или ширину соответственно (например, border-top-color устанавливает цвет для верхней рамки).

Стиль рамки: сокращенная запись

Все свойства рамки могут быть указаны кратко, используя border:

border: 3px dotted orange;

Порядок значений: толщина, тип, цвет, но, за исключением требуемого значения типа рамки, необязательно устанавливать все значения (если какое-либо значение опущено, браузер будет использовать значение по умолчанию).

CSS границы (margin)

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

Размеры границы могут быть назначены как индивидуально для всех четырех сторон, так и сокращенно – для всех сразу.

Для значения свойства margin используются:

• цифры – соответствующие единицы измерения: px, pt, em и т.д.;
• проценты (%) – за основу берется размер элемента;
• ключевое слово auto – результат зависит от того, какие другие значения границы указаны.

Индивидуальные границы

Вот пример, для установки индивидуальных границ:

margin-top: 20px;

margin-right: 15px;

margin-bottom: 10px;

margin-left: 5px;

В этом примере, верхняя граница – 20 пикселей, правая – 15, нижняя – 10 и левая – 5 пикселей.

Использование сокращенной записи

Вы можете использовать сокращенную запись четырех границ следующим образом:

margin: 20px 15 px 10px 5px;

Когда после margin указаны 4 значения, они соответствуют сначала верхней, правой, нижней и левой границе (движение по часовой стрелке). Margin может быть описан тремя значениями:

margin: 20px 10px 5px;

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

Когда для margin используется только два значения, то первое значение отражает верхнюю и нижнюю границу, второе – левую и правую.

Естественно, вы можете задать все границы равными – достаточно указать только одно значение:

margin: 25px;

Еще несколько примеров

Чтобы центрировать элемент в середине страницы, вы можете использовать ключевое слово auto следующим образом:

margin-left: auto;

margin-right: auto;

Выравнивание элемента по правому краю, достигается путем установки для границы некоторого числового значения и автоматического для левой границы:

margin-right: 1em;

margin-left: auto;

CSS отступы (padding)

Отступ (padding) используется для того, чтобы освободить место между содержимым элемента и его рамкой border.

Как и margin, значения отступа можно задать индивидуально для всех четырех сторон или для всех сразу.

Для значения свойства padding используются:

• числа, за которыми следуют их единицы измерения (px, pt, em и т.д.);
• проценты (%) – размер отступа рассчитывается как процент от размера элемента;
• ключевое слово auto.

Определение индивидуальных отступов

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

padding-top: 30px;

padding-right: 25px;

padding-bottom: 20px;

padding-left: 15px;

Таким образом, верхний отступ станет 30 пикселей, правый – 25, нижний – 20, и левый – 15 пикселей.

Использование сокращенной записи

Как и margin, padding может быть установлен сокращенным способом:

• padding: 25px 30px 20px 15px; Когда padding использует четыре значения, они означают соответственно верхний, правый, нижний и левый отступы.
• padding: 30px 20px 15px; Три значения соответствуют верхнему, (левый и правый – равные, вторая величина) и нижнему отступу.
• padding: 30px 20px; Padding с двумя значениями используется, когда верхний отступ равен нижнему (первая величина), а левый – равен правому отступу (второе значение).
• padding: 25px; Если все отступы равны, они могут задаваться только одним значением padding.

Несколько примеров

Отступ в ячейках таблицы. Таким образом, рамка текстового поля не разбивается:

td {padding-left: 0.5 em; padding-right:2em}

Смещение заголовка, чтобы избежать наложения на фоновое изображение:

h1 {background: url(sun.jpg) no-repeat;
height: 80px;
padding-left: 130px;}

Читайте далее: CSS уроки, 5 часть: фон, позиция