# Свойство "margin" Свойство `margin` задаёт отступы вокруг элемента. У него есть несколько особенностей, которые мы здесь рассмотрим. [cut] ## Объединение отступов Вертикальные отступы поглощают друг друга, горизонтальные -- нет. Например, вот документ с вертикальными и горизонтальными отступами: ```html

Горизонтальный 20px ← 40px → 20px Отступ

Вертикальный 20px

``` Расстояние по горизонтали между элементами `SPAN` равно `40px`, так как горизонтальные отступы по `20px` сложились. А вот по вертикали расстояние от `SPAN` до `P` равно `20px`: из двух вертикальных отступов выбирается больший `max(20px, 15px) = 20px` и применяется. ## Отрицательные margin-top/left Отрицательные значения `margin-top/margin-left` смещают элемент со своего обычного места. В CSS есть другой способ добиться похожего эффекта -- а именно, `position:relative`. Но между ними есть одно принципиальное различие. **При сдвиге через `margin` соседние элементы занимают освободившееся пространство, в отличие от `position: relative`, при котором элемент визуально сдвигается, но место, где он был, остается "занятым".** То есть, элемент продолжает полноценно участвовать в потоке. ## Пример: вынос заголовка Например, есть документ с информационными блоками: ```html

Общие положения

Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.

Общие обязанности водителей

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

``` **Использование отрицательного `margin-top` позволяет вынести заголовки над блоком**. ```css /* вверх чуть больше, чем на высоту строки (1.25em) */ h2 { margin-top: -1.3em; } ``` Результат: [iframe src="h2-margin-top" height=330 border=1 link] А вот, что бы было при использовании `position`: ```css h2 { position: relative; top: -1.3em; } ``` Результат: [iframe src="h2-margin-top-position" height=330 border=1 link] **При использовании `position`, в отличие от `margin`, на месте заголовков, внутри блоков, осталось пустое пространство.** ## Пример: вынос отчерка Организуем информацию чуть по-другому. Пусть после каждого заголовка будет отчерк: ```html

Заголовок

Текст Текст Текст.

``` Пример документа с такими отчерками: [iframe src="hr-margin-left-src" height=320 border=1 link] Для красоты мы хотим, чтобы отчерк `HR` начинался левее, чем основной текст. Отрицательный `margin-left` нам поможет: ```css /*+ no-beautify */ hr.margin { margin-left: -2em; } /* для сравнения */ hr.position { position: relative; left: -2em; } ``` Результат: [iframe src="hr-margin-left" height=320 border=1 link] Обратите внимание на разницу между методами сдвига! Уже отсюда видно, что отрицательные `margin` -- исключительно полезное средство позиционирования! ## Отрицательные margin-right/bottom Отрицательные `margin-right/bottom` ведут себя по-другому, чем `margin-left/top`. Они не сдвигают элемент, а "укорачивают" его. То есть, хотя сам размер блока не уменьшается, но следующий элемент будет думать, что он меньше на указанное в `margin-right/bottom` значение. Например, в примере ниже вторая строка налезает на первую: ```html
Первый
Второй div думает, что высота первого на 0.5em меньше
``` Это используют, в частности для красивых вносок, с приданием иллюзии глубины. Например: [iframe src="negative-margin-bottom" border=1 height=200 link="Посмотреть в отдельном окне" edit] ## Итого