Поля для ребенка не влияют на родительскую высоту

Это может быть очевидно для некоторых, но мне было трудно найти решение для этого.

Примечание для ответчиков: перейдите на "РЕАЛЬНЫЙ вопрос", спасибо:)

Но я нашел его - ниже описание проблемы:

Проблема:

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

HTML

<div class="parent">
    <div class="child">Some text...</div>
</div>

CSS

.parent{ background: black; }
.child{
    background: LightBlue;
    margin: 20px;
}

Fiddle: http://jsfiddle.net/k1eegxt3/

Решение:

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

Скорректированный CSS:

.parent{ background: black; padding: 1px; /* PADDING ADDED */ }
.child{
    background: LightBlue;
    margin: 20px;
}

Fiddle: http://jsfiddle.net/fej3qh0z/

Вопрос REAL:

Однако я действительно хочу знать, почему это работает именно так, а не только как это исправлено, Так, пожалуйста, может кто-нибудь, пожалуйста, напишите ответ, объясняющий это поведение, и добавьте некоторые ссылки DOC?

Большое спасибо:)