Margin applied to child element is impacting parent element

HTML-CSS
1

I am learning CSS and was experimenting with positioning elements. I came across an behavior and just wanted to understand why it is happening. In the below example if I set margin to parent div, it is even bringing down ‘grand-parent’ div by 20px.

`<div class="grand-parent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

<style>
.grand-parent {
  width: 600px;
  height: 600px;
  background-color: yellow;
}

.parent {
  width: 400px;
  height: 400px;
  background-color: red;
  margin:20px;
}

.child {
  width: 200px;
  height: 200px;
  background-color: green;
}
</style>`
2

Use for default and remove margin from other class.

div{
display: inline-block;
margin:20px;
}

        .grand-parent {
          width: 600px;
          height: 600px;
          background-color: yellow;
        }
        
        .parent {
          width: 400px;
          height: 400px;
          background-color: red;
        }
        
        .child {
          width: 200px;
          height: 200px;
          background-color: green;
  }
3

Just to change the position of the parent element and not the grand parent, prefer using position and set it to absolute and then change the position of “only” parent element according to your preference. I used your codes and did some changes to make you better understand .

Hope this helped :smile: