Проблема с margin при изменении свойства border

Почему при изменении свойства border меняются отступы снизу и сверху? Есть код, приведенный ниже, он с border (в content_wrap ), и он отображается так

Если убрать border, то будет выглядеть так:

Листинг:
#content_wrap{ border: 1px solid rgba(255, 255, 255, 0.65); margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 20px; width: 980px; background-color:red; } #content{ position: relative; margin: 20px 20px 20px 20px; padding: 10px 10px; background-color: green; }

СТУДЕНТАМ

ОРДИНАТОРАМ

Аспирантам

Слушателям

Контакты

Ответ

Такое явление называется margin collapsing. Ссылка на документацию
Горизонтальные margin'ы никогда не схлопываются, а вот с вертикальными все немного сложнее.
Проиллюстрирую немного на примерах, для этого будем использовать следующую базовую разметку:
.b-wrapper { background-color: yellow; } .b-first { height: 100px; background-color: moccasin; } .b-second { height: 100px; background-color: magenta; }

Смежные (перекрывающиеся) margin'ы не схлопываются в следующих ситуациях:
если один из элементов корневой (html), пример на jsFiddle этот пункт связан с понятием clearance, он может возникнуть, когда блоку приходится "оплывать", тогда margin'ы не схлопываются (правдиво для случаев, когда у элементов нет padding или border). Можно поиграться на jsFiddle, если убрать clear: both;, то margin'ы схлопнуться. Вообще тема с плавающими (имеющими float: *) блоками заслуживают отдельного вопроса; если один элемент вложен в другой и родительский имеет border или padding, тогда на вложенном элементе margin не схлопнется jsFiddle
Теперь можно сказать и о случаях, когда они все таки схлопываются:
если элементы находятся друг за другом в одном block formatting context (его создают внутри себя все элементы с float, абсолютным позиционированием, элементы, которые ведут себя, как блочные (inline-block, table-cell, table-caption), но не имеют display: block , и соответственно элементы с display: block) и margin положительный у обоих, то результатом будет больший jsFiddle, а если какой-либо margin отрицателен, тогда результирующим значением margin'а будет их сумма, причем, если сумма получится отрицательной, то элементы наложатся друг на друга jsFiddle если один элемент вложен в другой и родительский не имеет border или padding, или clearence, тогда вложенный элемент не будет отступать от родительского, а их margin'ы схлопнуться и у родительского будет больший из них, jsFiddle если блок не формирует block formatting context , а потомки имеют подсчитанную min-height: 0, height: auto или подсчитанную height: 0, то его верхний и нижний margin будет схлопываться jsFiddle