Еще один интересный эффект, который связан со свойством 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>
Учитывайте это свойство на практике, чтобы все элементы отображались у вас так, как это нужно вам.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти