Дизайнеры часто в макетах с использованием модульной сетки выносят некоторые блоки за пределы модулей, чтобы добавить задний фон или рамку. Визуально текст в колонке и текст внутри такого блока выровнен по одной линии.

Чтобы сверстать этот фрагмент можно задать значение padding для основного текста колонки и сделать его равным 0 у блока с выноской. Этот способ очевиден и надежен, но далеко не универсален. Нужно будет тщательно выверять выравнивание других модулей, которые могут быть привязаны к этой же разметке.

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

.block {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    zoom: 1;
}

Величина отступа с отрицательным значением задается в margin, и тут же компенсируется таким же положительным значением в padding.

Для IE 6 и 7 добавляются еще position: relative и свойство zoom: 1, которое включает блоку hasLayout . Замечу, что у родительского блока тоже обязательно должен быть включен hasLayout для корректного отображения.