Why margin behaves?

Good afternoon. Please tell me. Why margin: 10px; (to the block .test-inner) recedes from the top of the body and not from the parent unit. Thank you.

7d5fdaa04c274375a7a1e86ed205b715.jpg
<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;
}
July 2nd 19 at 17:18
3 answers
July 2nd 19 at 17:20
Solution
Marine work out, that's all. That is, for example, the upper unit was a lower margin 20, and the bottom block the top 10, then he margin between them will be 10. This is how margin works.
And how can it be between them if there is one block inside another. The body dropped to 0. If it turns out the first unit of majin top 0 the second 10 it turns out top value - Roma2 commented on July 2nd 19 at 17:23
is taken 10. But why the indentation from the body and not from the parent and in this case doing? Clearfix? - Roma2 commented on July 2nd 19 at 17:26
July 2nd 19 at 17:22
Solution
  1. About the collapse of indentation can be read on the MDN, for example. Your case is "Parent and first/last child elements". Then you can go to the specification
  2. Do not forget that the body also by default also have a non-zero margin
Just the same, non-zero, what I wrote - Roma2 commented on July 2nd 19 at 17:25
July 2nd 19 at 17:24
Solution
this is called margin collapse

Find more questions by tags LayoutCSSHTMLJavaScript