1

Today I was trying to make a form (in this case it's a div with class .second-div) under another div with this code:

.first-div
{
  width: 25%;
  height: 100px;
  float: right;
  position: relative;
  background-color: blue;
  margin-top: 2.5em;
  margin-right: 2em;
}

.second-div
{
  width: 80%;
  height: 100px;
  margin: 60px auto 60px auto;
  position: relative;
  background-color: red;
  clear: both;
}
<div class="first-div"></div>
<div class="second-div"></div>

My question is, why doesn't this CSS apply margin-top to the .second-div and both of these divs are tied together? What's even stranger to me is that when I apply margin-bottom to the .first-div, it works as I'd like it to. Can someone explain this to me?

SuperDJ
  • 7,488
  • 11
  • 40
  • 74
Dano
  • 43
  • 1
  • 6
  • It's a known venomenon https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing, https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing – SuperDJ Aug 08 '18 at 19:33
  • Thanks, that first link explained it to me. Also, just to note, I didn't want to know how to fix it, but why does it happen, that's why I started a new post. Anyway, thanks for help, kind sir! – Dano Aug 08 '18 at 19:56
  • @SuperDJ this is not exactly margin-collapsing but another kind of issue – Temani Afif Aug 08 '18 at 23:28

0 Answers0