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>`