Почему при наличии у родителя и его потомка положительного margin-top отступ у потомка не схлопывается, только если у родителя есть граница сверху?

#css

Собственно в первом примере обозначаем бордер, во втором убираем. Смотрим что получилось:
Пример 1:
Здесь есть у родителя бордер:



#parent {
  position: relative;
  margin-top: 24px;
  box-shadow: 0px 0px 20px 0px #000000;
  border: solid 1px #ff3333;
  /*вот он*/
  width: 600px;
  height: 400px;
  background-color: #000000;
}
#child {
  position: relative;
  margin-top: 100px;
  height: 240px;
  width: 320px;
  background-color: #0FF000;
}

  






[демо]

Пример 2:
Здесь у родителя нет бордера



 #parent {
   position: relative;
   margin-top: 24px;
   box-shadow: 0px 0px 20px 0px #000000;
   border: solid 0px #ff3333;
   /*вот его нет*/
   width: 600px;
   height: 400px;
   background-color: #000000;
 }
 #child {
   position: relative;
   margin-top: 100px;
   height: 240px;
   width: 320px;
   background-color: #0FF000;
 }

  






[демо 2]

Внимание вопрос:
С чем связано такое поведение родителя и дочернего объекта?



P.S. уже к админам проекта: Очень неудобно реализовано требование вставки кода из
jsfiddle. Собирать воедино код из всех четырёх фреймов? Очень неудобно.
    

Ответы

Ответ 1

Все верно работает


margin работает внутри блока так как в блоке есть ограничения (border, padding, overflow:hidden),
так же как и очистка потока
marginы схлопываются и двигают блок вниз как и положено


Поэтому используют clearfix и тп для того чтобы блоки были "нормального" размера,
хотя суть в обратном - дать возможность засунуть блоки туда куда они засовываться не хотят.

... Написал все не технически, за технической частью в W3C.


Ответ 2

Верхние и нижние границы (margin) блоков иногда преобразуются (схлопываются) в одну
границу, 
большую из двух соответствующих. Это поведение называется "схлопывание границ" (margin
collapsing).

|   A   |                                                              
|_______|                                      |   A   |               
          -                                    |_______|               
          - margin-bottom        станет                  - общая граница, равная большей
          -                   ----------->               - из двух, т.е. margin-bottom
---------                                       _______  -        
 _______  - margin-top                         |   B   |
|   B   |                                      


Схлопывание границ происходит в трёх случаях, а так же когда эти случаи комбинируются.

Смежные потомки одного родителя

Границы смежных элементов одного родителя схлопываются (за исключением, когда последующий
элемент очищается (clear) от предыдущих плавающих (float) элементов).

Родитель и первый/последний потомок (случай, рассматриваемый в вопросе)

Если нет рамки (border), внутренних отступов (padding), линейного содержимого, или
очистки (clear) для разделения margin-top блока от margin-top его первого потомка или
нет рамки, внутренних отступов линейного содержимого, height, min-height или max-height
для разделения margin-bottom блока от margin-bottom его последнего потомка, тогда их
границы схлопываются. Получившаяся таким образом граница будет расположена снаружи
родительского элемента.

Пустые блоки

Если нет рамки, внутренних отступов, линейного содержимого, заданного свойства height
или min-height, чтобы разделить margin-top блока от его margin-bottom, тогда верхние
и нижние границы схлопываются.

Границы плавающих и абсолютно позиционируемых элементов никогда не схлопываются.



Ответ написан на основе статьи "Mastering margin collapsing".