15.Блочная модель css. Установка параметров границ и отступов.

Каждый элемент располагается в блоке, состоящем из содержимого этого элемента, рамки (border), промежуточной области между содержимым и границей элемента (padding), а также полей (margin). Изучение этих свойств поможет в дальнейшем, когда вы будете задавать вид странице.

Padding, margin и border — блочная модель и задание отступов и границ в CSS

Margin (top, bottom, left, right) — задание наружных отступов в CSS для Html частей

Блочные тэги выводятся браузером с новой строки, например P, DIV, H1-H6.

Если мы задаём стиль текста для блока, то этот стиль будет применен ко вложенному тексту. Но есть некоторые css-свойства, которые, как правило, применяют только к блокам. Например отступы (внешние), поля (внутренний отступ), фон, граница (бордюр) и т.п.

Для экспериментов сделаем простой DIV-блок. Напомню, что в текстовом редакторе HTML-код нужно обрамлять в [html]. Здесь, для простоты, я его буду опускать.

<div style="color: red;">

текст блока

</div>

Очевидно, что текст этого блока будет красным. Теперь рассмотрим свойство background - с его помощью можно указать фон блока.

<div style="color: red; background: yellow;">

текст блока

</div>

В этом примере фон блока стал желтым.

Обратите внимание, как распределился блок на странице - он стал 100% ширины записи. Это одна из особенностей блоков - по-умолчанию заполнять всю ширину родительского блока.

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

<div style="color: red; background: yellow; width: 300px; height: 200px;">

текст блока

</div>

Отступы

Отступы бывают внешние (margin) и внутренние (padding). Внутренние отступы часто называют полями. Единицы измерения - стандартные.

Существует два синтаксиса указать отступы. Первый - для каждой стороны. Второй - все стороны сразу.

margin-top - верхний отступ

margin-right - правый отступ

margin-bottom - нижний отступ

margin-left - левый отступ

Аналогично и для внутреннего: padding-top, padding-right, padding-bottom и padding-left.

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

margin: верх право низ лево

padding: верх право низ лево

Для простого запоминания порядка верх-право-низ-лево мысленно используйте циферблат часов. Значение указываются по часовой стрелке сверху. Это правило используется и в некоторых других css-свойствах.

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

margin: 10px 20px

будет эквивалентно:

margin-top: 10px;

margin-right: 20px;

margin-bottom: 10px;

margin-left: 20px;

Если же у нас совпаают правое и левое поля, то запись может быть такой:

margin: 10px 20px 30px

будет эквивалентно:

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 20px;

всегда нужно указывать единицы измерения. Единственное исключение - 0.

на практике:

<div style="color: red; background: yellow;

width: 300px; height: 200px;

margin: 50px 0 0 150px;">

текст блока

</div>

Поведение вполне очевидное - у нашего блока появились отступы сверху и слева.

Границы

Границы - border добавляют к блоку еще порцию размеров. Свойство border проще всего задавать сразу «скопом»:

border: цвет размер стиль

Последовательность может быть произвольной.

Для задания границ с разных сторон используются: border-top, border-right, border-bottom и border-left.

Цвет и размер указывается как обычно. Стиль определяет вид линии. Полные варианты вы посмотрите в CSS-справочнике, я лишь остановлюсь на двух вариантах.

solid - сплошная линия

dotted - пунктирная линия

на практике.

<div style="color: red; background: yellow;

width: 300px; height: 200px;

margin: 50px 0 0 150px;

border: 10px red solid;">

текст блока

</div>

Если измерить размеры блока, то убедимся, что реальная ширина не 300px, а 320px - то есть физический размер блока стал больше на ширину границы (по 10px с парных сторон).

При отладке верстки, чтобы визуально выделить блок, они прописывают свойство border, что в итоге увеличивает физический размер блока и вёрстка «разваливается». Поэтому одно из правил опытного верстальщика - никогда не использовать border для отладки. Если нужно выделить блок, то используется background.