div margin level why when we apply margin property to lower div it apply on the upper div

Question

Here i have three divs i want the div three to have margin from the top but since then I am giving it the margin to the third div but what and expected to move from the top only bit the complete div is moving

*{  
  margin:0;
  padding:0;
}

.divone{
  background-color:red;
}
.divtwo{
  margin:10px 4px;
}
.divthree{
  display:flex;
  justify-content:space-between;
}

<div class="divone">
  <div class="divtwo">
    <div class="divthree">
      <div class="ndiv">
        <h3>I am</h3>
      </div>
      <div class="ndiv">
        <h3>Hello</h3>
      </div>
    </div>
  </div>
</div>

That's regular behaviour. Google "collapsing margins" for a description of this phenomenon. Or just read here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing — Johannes, Apr 10 '22 at 14:07

score 0 · Answer 1 · answered Apr 10 '22 at 14:09

According to your code you're currently applying it to .divtwo.

What you actually need to do is apply padding to .divthree to get what you want.

Change your CSS to the following to accomplished that:

*{  
  margin: 0;
  padding: 0;
}

.divone{
  background-color: red;
}

.divthree{
  display: flex;
  justify-content: space-between;
  padding: 10px 4px;
}

div margin level why when we apply margin property to lower div it apply on the upper div

1 Answers1