Почему margin ведет себя так?

Question

[vovkka]

Добрый день. Подскажите пожалуйста. Почему margin: 10px; (в блоке .test-inner) отступает сверху от body а не от блока родителя. Спасибо.

<div class="test">
	<div class="test-inner">item1</div>
</div>

.test {
	max-width: 500px;
	min-width: 350px;
	height: 100px;
	background: #ff2;
	margin: 0 auto;
}

.test-inner {
	background: #f55;
	margin: 10px;
}

Answer 1

[Paul Denisevich]

Маржины складываются, вот и всё. То есть например у верхнего блока был нижний маржин 20, а у нижнего блока верхний 10, то сам маржин между ними будет 10. Это то, как работает маржин.

Comments

[vovkka]

А как может быть между ними если там один блок внутри другого. У боди сброшен в 0. Получается если у первого блока маджин топ 0 у второго 10 то получается по верхнему значению

[vovkka]

Paul Denisevich берется 10. Но почему отступ от боди а не от родителя и что в этом случае делают? Clearfix?

Answer 2

[quramolt]

1. Про схлопывание отступов можно почитать на MDN, например. Ваш случай - "Родительский и первый/последний дочерние элементы". Потом можно пойти в спецификацию
   
2. Не забудьте, что у body тоже по умолчанию тоже есть ненулевой margin
   

Comments

[quramolt]

Как раз таки НЕнулевой, о чём я написал

Answer 3

[Максим]

это схлопывание margin называется