Название

Свойство CSS margin.

И наконец последнее свойство CSS, которое влияет на размеры блоков на веб-странице - это свойство margin.

Свойство margin отвечает за образование пространства от границы элемента до ближайших соседних элементов, с которыми соседствует блок.

На знакомом нам изображении зону действия этого свойства можно увидеть на области выделенной красным цветом.

boxdim

Это внешняя составляющая блока.

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

<p>Соседний абзац</p>
<p style="border:1px solid #000; margin:30px;">Пример абзаца с margin</p>
<p>Соседний абзац</p>

На этом примере явно видно, как элемент со свойством margin смещается относительно других абзацев.

Проще говоря, margin представляет собой внешний отступ до других элементов.

Margin можно задавать отдельно для каждой стороны блока, добавляя названия стороны через тире.

margin-left, margin-right, margin-top, margin-bottom

<p>Соседний абзац</p>
<p style="border:1px solid #000; margin-top:30px; margin-right:30px">Пример абзаца с margin</p>
<p>Соседний абзац</p>

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

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

Назад Далее