When I'm nesting a div inside another div and giving margin-top to inner div why upper division moves down too

Question

<div class="container>
<div class="child">
</div>

</div>

CSS

.container{

height:200px
Background:black}

.child{
height:50px
background:red
margin-top:10px}

While I'm applying margin to child container moves down too

Answer 1

Here is a discussion about this issue
https://stackoverflow.com/questions/8529695/adjusting-the-margin-top-of-a-div-inside-of-a-container-div-pushes-both-the-inne

Answer 2

Reset all margin and padding to zero

* {
margin: 0;
padding: 0;
}

Answer 3

Ty both for valuable answers