Почему margin-top ребёнка двигает родителя?
Когда двигаю марджином блок, то двигается и родитель. Почему так? Не должен ли этот блок наоборот - отталкиваться от него?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
background-color: #000;
}
.container-inner {
width: 80%;
height: 200px;
background-color: green;
margin-top: 50px;
}
<div class="container">
<div class="container-inner"></div>
</div>
Ответы (1 шт):
Автор решения: Роман Мереняну-Ени
→ Ссылка
Почитайте Схлопывающиеся отступы - http://htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvayushchiesya-otstupy Чтобы этого не было, добавьте родительскому блоку: overflow: auto.