Блок с margin-top отталкивается не от родителя?

Question

[Ксения]

Помогите, пожалуйста, понять свойство margin-top.
Есть два элемента, один другом. Задаю внутреннему margin-top, а он отталкивает родителя от края экрана, а не сам от верхней границы родителя отталкивается.
https://jsfiddle.net/y997mpfw/
Конечно, всегда можно сделать padding родителю, но хочется понять почему так себя ведет внутренний блок? У него есть граница, по идее схлопывание срабатывать не должно.

Comments

[SelenIT3]

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

Answer 1

[V Sh.]

Margin collapsing (схлопывание внешних отступов)

Answer 2

[Руслан Галиев]

Я не знаю почему это происходит, но display:inline-block; у ребенка помогает)
Слетит выравнивание по центру. Восстановить можно с помощью text-align:center; у родителя.

Все это костыли, думаю есть более элегантное решение.

UPD: display:inline-block; можно задать родителю.

Comments

[Ксения]

Костыли )) Можно родителю прозрачную рамку задать - тоже сработает...

[Руслан Галиев]

Кстати, display:inline-block; у родителя тоже помогает)

[SelenIT3]

Плюсы и минусы большинства известных науке костылей можно сравнить в этой таблице: css-live.ru/articles-css/clearfix-block-formatting... (особенно последняя группа).