CODEWITHSUNDEEP
htmlcss
syang
syang

Reputation: 65

Why there is a strange white space above the body tag?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  list-style: none;
}

li:not(:last-child) {
  margin-right: 10px;
}

ul {
  margin-bottom: 50px;
}
<body>
  <ul>
    <li>11111111111</li>
    <li>22222222222</li>
  </ul>
</body>

I find there is a strange white space above the body tag, and the height of the white space is equal to the ul's margin-bottom. I am confused, that's why?
I use the Firefox browser, and it's version is 90.0.2 (it is up to date).

Following is the snapshot of the page:

The strange white space above the body tag.

Upvotes: 2

Views: 160

Answers (2)

Vishal_VE
Vishal_VE

Reputation: 2127

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  list-style: none;
}

li:not(:last-child) {
  margin-right: 10px;
}

ul {
  overflow: hidden;
  margin-bottom: 50px;
}
<body>
  <ul>
    <li>11111111111</li>
    <li>22222222222</li>
  </ul>
</body>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272772

You are not clearing the floats so you can ignore them to understand your issue.

You have an empty ul having bottom margin. That margin will collapse with the bottom margin of the body then the body is also empty so both its top and bottom margin will collapse and we end with one margin equal to 50px applied to the body.

That margin will end as a top margin for the body and this is pushing the float content to the bottom.

Here is another illustration to understand what is happening

.box {
  border:5px solid;
}

.box * {
  outline:2px solid red;
}
<div class="box">
  <div>
    <div style="margin-bottom:50px;"></div>
  </div>
</div>

Notice how the emty divs are at the bottom. Now add a float element

.box {
  border:5px solid;
  overflow:auto;
}

.box * {
  outline:2px solid red;
}

.box * *{
  outline:4px solid blue;
}
<div class="box">
  <div>
    <div style="margin-bottom:50px;"><div style="float:left">ok</div></div>
  </div>
</div>

More detail about margin collapsing: https://www.w3.org/TR/CSS2/box.html#collapsing-margins

Upvotes: 1

Related Questions