0

The floated box (pink one) should have been zero margin on the top, but it seems to be the same margin-top as the green one. Why?

* {
  padding: 0;
  margin: 0;
}
.normalBox {
  width: 50px;
  height: 50px;
  background-color: pink;
}
.largerBox {
  width: 100px;
  height: 100px;
  background-color: green;
}
.margin-10px {
  margin: 10px
}
.float {
  float: left;
}
<div class="normalBox float"></div>
<div class="largerBox margin-10px"></div>

But this problem disappeared when the green one also has zero margin:

* {
  padding: 0;
  margin: 0;
}
.normalBox {
  width: 50px;
  height: 50px;
  background-color: pink;
}
.largerBox {
  width: 100px;
  height: 100px;
  background-color: green;
}
.margin-10px {
  margin: 10px
}
.float {
  float: left;
}
<div class="normalBox float"></div>
<div class="largerBox"></div>

Or there is a previous sibling box that also has no margin, the pink one and the green one just acts as expected:

* {
  padding: 0;
  margin: 0;
}
.normalBox {
  width: 50px;
  height: 50px;
  background-color: pink;
}
.normalBox2 {
  width: 50px;
  height: 50px;
  background-color: orange;
}
.largerBox {
  width: 100px;
  height: 100px;
  background-color: green;
}
.margin-10px {
  margin: 10px
}
.float {
  float: left;
}
<div class="normalBox2"></div>
<div class="normalBox float"></div>
<div class="largerBox margin-10px"></div>
constantem
  • 71
  • 2
  • 6
  • 2
    The margin of the first in-flow child (the green box) collapse with its parent (the body) which will result in moving all the body content down – Temani Afif Feb 04 '22 at 12:52
  • Thanks Temani Afif, other answers to my question can be seen here: https://stackoverflow.com/q/9519841/11139624 – constantem Feb 05 '22 at 16:26

0 Answers0