Parent element moving when giving margin to child

1

I’ve a simple container with a child element . When I’m giving margin to the child element margin-top : 10px , it’s pushing the parent element downwards rather than pushing the child . I don’t know why this is happening . Please help me to understand it

<html>
 <body>
  <div class="parent">
   <div class="child">
    Lorem ipsum was a great man.
   </div>
  </div>
 </body>
</html>

<style>
 .child{
    margin-top: 10px;
    border: 1px solid black;
 }
.parent{
    border: 1px dashed red;
 }

</style>
2

add

.parent{
overflow: hidden;
}

or

.parent{
overflow: auto;
}
3

try this see if it helps:

<html>
 <body>
  <div class="parent">
   <div class="child">
    Lorem ipsum was a great man.
   </div>
  </div>
 </body>
</html>

<style>
 .child{
    margin-top: 150px;
    height:30px;
    background-color:grey;
    position:absolute;
  }
.parent{
    background-color:blue;
    height:50px;
    position:relative;
  }
</style>
4

I don’t see any problem (on Chrome, IE, Firefox) :thinking:

demo