Наследование margin-top родительскими элементами.

Еще один интересный эффект, который связан со свойством margin-top - это эффект наследования отступов по вертикали дочернего элемента родительским элементом.

Давайте посмотрим, как это выглядит.

Имеем два блока div, один из которых родительский, а другой дочерний.

<div style="background:#c9c;">
<div style="background:#ccc; margin-top:30px;">Дочерний блок</div>
родительский блок
</div>

Обратите внимание, что несмотря на то, что свойство margin-top было присвоено дочернему элементу, в конечном итоге, отступ появился у родительского блока.

Довольно странное и неожиданное поведение, правда?

Но, есть способ, как можно изменить такое поведение.

1 вариант. Добавить родительскому блоку свойство overflow:hidden.

<div style="background:#c9c; overflow:hidden;">
<div style="background:#ccc; margin-top:30px;">Дочерний блок</div>родительский блок
</div>

2 вариант. Добавить родительскому блоку свойство padding-top.

<div style="background:#c9c; padding-top:1px;">
<div style="background:#ccc; margin-top:30px;">Дочерний блок</div>
родительский блок
</div>

3 вариант. Добавить родительскому блоку свойство border-top.

<div style="background:#c9c; border-top:1px solid #ccc;">
<div style="background:#ccc; margin-top:30px;">Дочерний блок</div>
родительский блок
</div>

Учитывайте это свойство на практике, чтобы все элементы отображались у вас так, как это нужно вам.