+7 (978) 09 16 718
[email protected]Создание фреймов, внутренних отступов и расстояний между отдельными элементами HTML-страниц называется блочная модель (box model). Каждый элемент HTML может быть представлен как сложный, в своем собственном блоке, который имеет следующие компоненты:
Когда вы указываете ширину и высоту элемента с помощью width и height, вы указываете только размер содержимого. Размер всего блока также зависит от границы, рамки и внутреннего отступа.
Например, пусть для элемента указываются следующие параметры:
width:200px;
padding:20px;
border:2px solid blue;
margin:15px;
Для этого блока ширина будет 200 (содержимое) + 2 * 20 (левый и правый внутренний отступ) + 2 * 2 (левая и правая граница) + 2 * 15 (левая и правая граница) = 274 пикселей.
Как видите, элемент будет занимать значительно больше места, чем ширина, указанная для содержимого. Об этом следует помнить при создании страниц, чтобы избежать наложения отдельных элементов.
Большинство браузеров рассчитывают размеры блоков, как было описано выше. Одним заметным исключением является Internet Explorer – для этого браузера ширина включает рамки border и отступы padding. По этой причине элементы, которые определены шириной width, будут казаться уже, чем в других браузерах. То же самое относится и к высоте height.
Однако, решение проблемы очень простое: достаточно указать DOCTYPE для документа HTML, и Internet Explorer будет соответствовать общепринятому методу использования метода блочной модели.
CSS border команды дают возможность определить вид рамки: тип, цвет и толщина.
Команда вида рамки задается с помощью border-style и может принимать следующие значения:
Свойство толщины рамки задается с помощью border-width, а значение можно указывать как цифрами (в пикселях), так и одним из следующих слов: thin, medium, thick, которые браузер будет интерпретировать автоматически, чтобы создать соответственно узкую, нормальную или толстую рамку. Обратите внимание, что border-width будет эффективно реализован, только если уже указан тип рамки (border-style).
Чтобы установить цвет рамки используется border-color. Аналогично цвету текста, сами значения для цвета рамки могут быть:
Указание цвета рамки будет действительным, только если указан вид рамки (border-style).
Вы можете указать различный тип рамки для каждой из четырех сторон, используя следующие слова:
Аналогичным образом устанавливаются значения цвета и толщины для отдельных сторон: замените стиль на цвет или ширину соответственно (например, border-top-color устанавливает цвет для верхней рамки).
Все свойства рамки могут быть указаны кратко, используя border:
border: 3px dotted orange;
Порядок значений: толщина, тип, цвет, но, за исключением требуемого значения типа рамки, необязательно устанавливать все значения (если какое-либо значение опущено, браузер будет использовать значение по умолчанию).
С помощью команды margin можно обеспечить пустое пространство вокруг элемента. Это пространство является бесцветным и прозрачным и не выходит за рамки элемента.
Размеры границы могут быть назначены как индивидуально для всех четырех сторон, так и сокращенно – для всех сразу.
Для значения свойства margin используются:
Вот пример, для установки индивидуальных границ:
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;
Отступ (padding) используется для того, чтобы освободить место между содержимым элемента и его рамкой border.
Как и margin, значения отступа можно задать индивидуально для всех четырех сторон или для всех сразу.
Для значения свойства padding используются:
Каждый из четырех отступов может быть задан отдельно:
padding-top: 30px;
padding-right: 25px;
padding-bottom: 20px;
padding-left: 15px;
Таким образом, верхний отступ станет 30 пикселей, правый – 25, нижний – 20, и левый – 15 пикселей.
Как и margin, padding может быть установлен сокращенным способом:
Отступ в ячейках таблицы. Таким образом, рамка текстового поля не разбивается:
td {padding-left: 0.5 em; padding-right:2em}
Смещение заголовка, чтобы избежать наложения на фоновое изображение:
h1 {background: url(sun.jpg) no-repeat;
height: 80px;
padding-left: 130px;}
Читайте далее: CSS уроки, 5 часть: фон, позиция