Свойство margin задаёт отступы вокруг элемента. У него есть несколько особенностей, которые мы здесь рассмотрим.
Объединение отступов
Вертикальные отступы поглощают друг друга, горизонтальные – нет.
Например, вот документ с вертикальными и горизонтальными отступами:
<body style="background: #aef">
<p style="margin:20px; background:white">
<span style="margin:20px; background:orange">Горизонтальный 20px</span>
← 40px →
<span style="margin:20px; background:orange">20px Отступ </span>
</p>
<p style="margin:15px; background:white">Вертикальный 20px</p>
</body>Расстояние по горизонтали между элементами SPAN равно 40px, так как горизонтальные отступы по 20px сложились.
А вот по вертикали расстояние от SPAN до P равно 20px: из двух вертикальных отступов выбирается больший max(20px, 15px) = 20px и применяется.
Отрицательные margin-top/left
Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.
В CSS есть другой способ добиться похожего эффекта – а именно, position:relative. Но между ними есть одно принципиальное различие.
При сдвиге через margin соседние элементы занимают освободившееся пространство, в отличие от position: relative, при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».
То есть, элемент продолжает полноценно участвовать в потоке.
Пример: вынос заголовка
Например, есть документ с информационными блоками:
<style>
div {
border: 1px solid blue;
margin: 2em;
font: .8em/1.25 sans-serif;
}
h2 {
background: #aef;
margin: 0 0 0.8em 0;
}
</style>
<div>
<h2>Общие положения</h2>
<p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
</div>
<div>
<h2>Общие обязанности водителей</h2>
<p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
<ul>
<li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
<li>...и так далее...</li>
</ul>
</div>Использование отрицательного margin-top позволяет вынести заголовки над блоком.
/* вверх чуть больше, чем на высоту строки (1.25em) */
h2 {
margin-top: -1.3em;
}Результат:
А вот, что бы было при использовании position:
h2 {
position: relative;
top: -1.3em;
}Результат:
При использовании position, в отличие от margin, на месте заголовков, внутри блоков, осталось пустое пространство.
Пример: вынос разрыва
Организуем информацию чуть по-другому. Пусть после каждого заголовка будет разрыв:
<div>
<h2>Заголовок</h2>
<hr>
<p>Текст Текст Текст.</p>
</div>Пример документа с такими разрывами:
Для красоты мы хотим, чтобы разрыв HR начинался левее, чем основной текст. Отрицательный margin-left нам поможет:
/*+ no-beautify */
hr.margin { margin-left: -2em; }
/* для сравнения */
hr.position { position: relative; left: -2em; }Результат:
Обратите внимание на разницу между методами сдвига!
hr.marginсначала сдвинулся, а потом нарисовался до конца блока.hr.positionсначала нарисовался, а потом сдвинулся – в результате справа осталось пустое пространство.
Уже отсюда видно, что отрицательные margin – исключительно полезное средство позиционирования!
Отрицательные margin-right/bottom
Отрицательные margin-right/bottom ведут себя по-другому, чем margin-left/top. Они не сдвигают элемент, а «укорачивают» его.
То есть, хотя сам размер блока не уменьшается, но следующий элемент будет думать, что он меньше на указанное в margin-right/bottom значение.
Например, в примере ниже вторая строка налезает на первую:
<div style="border: 1px solid blue; margin-bottom: -0.5em">
Первый
</div>
<div style="border: 1px solid red">
Второй div думает, что высота первого на 0.5em меньше
</div>Это используют, в частности для красивых вносок, с приданием иллюзии глубины.
Например:
Итого
- Отрицательные
margin-left/topсдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига черезposition. - Отрицательные
margin-right/bottomзаставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле.
Отличная статья на тему отрицательных margin: The Definitive Guide to Using Negative Margins