Все что следует знать про отрицательные margin в CSS

В верстке мы повсеместно используем CSS свойство margin для внешних отступов и горизонтального выравнивания. Вероятно вы встречали, или использовали и отрицательные margin.

.element {
margin-top: -20px;
}

Его используют редко, в основном для каких-то мелких правок по размещению контента.

Спецификация W3C говорит нам:

Отрицательные значения для свойств полей допускаются, но могут существовать ограничения для конкретной реализации.

Отрицательные поля не ХАК.

Отрицательное поле может стать хаком лишь тогда, когда вы пытаетесь поправить ошибку в своем коде при помощи отрицательного margin (что чаще всего и происходит).

Правильное использование отрицательных отступов открывает широкие возможности и позволяет сделать верстку более универсальной. 

Разберемся как работают отрицательные значения margin на примере ниже:

Возьмем 2 одинаковых статических (float: none; position: static;) элемента, размером 160px / 160px. Первому (фиолетовому) зададим margin-top: -50px;

Первый элемент поднялся в заданном направлении, второй поднялся вместе с ним. Как видно отрицательные поля не разрушают поток так как синий блок также приподнят.

Отрицательные margin сокращают расстояние между элементами, вплоть до того, что эти элементы будут перекрывать друг друга.

Зададим это значение второму элементу, а у первого уберем:

Мы добились результата описанного выше – блок №2 теперь перекрывает блок №1.

Та же ситуация с отрицательными отступами по горизонтали. Отличие лишь в том, что если у элемента не задана ширина, то то при использовании отрицательного margin по направлению left/right элемент будет вытолкнут в обоих направлениях с увеличением ширины элемента.

Размер первого элемента на 40px (20 слева + 20 справа) шире элемента №2.

Теперь проставим еще и отрицательный margin-bottom блоку №1.

Отрицательные margin-right/bottom ведут себя по-другому, чем margin-left/top. Они не сдвигают элемент, а уменьшают его высоту.

Подытожим, отрицательное значение для margin это –

• валидное, допустимое значение
• не имеет воздействия на поток
• имеет отличную поддержку браузерами от IE6
• мощный инструмент при понимании особенностей его работы
• margin-left/top сдвигают элемент влево-вверх, на другие элементы это учитывают
• margin-right/bottom  указывают другим элементам, что блок меньше по размеру, чем он на самом деле

и все же это не повседневный инструмент в CSS, поэтому вы должны использовать такой margin с осторожностью.