Why is the web page show a scroll bar when `body` set to `min-height: 100vh`?

Question

I already reset all the margin and padding to 0. see the codepen: https://codepen.io/geeklog/pen/zYvVeOZ

<div class="container">hello</div>

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

body {
  min-height: 100vh;
  background-color: pink;
}

.container {
  margin: 10px auto;
  background-color: orange;
}

Answer 1

margin: 10px auto;

Unlike paddings, CSS margins are not exactly a spacing measure when it is applied to an element inside. When you apply a margin to the elements like above, the top margin will tend to go outside of the parent element. It is just an example of the general margin collapsing behavior.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Therefore, in your code snippet, it's not only the body with the height of 100vh that you see on the screen. It also includes 10px of space right above the body element.

To resolve this issue, remove margin from .container and consider applying padding-top: 10px; to the body element instead.

Answer 2

because of your margin of .container

you have 2 options,

first, remove the margin of .container.

second, add overflow: hidden on body

I think the first option is better.

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

body {
  min-height: 100vh;
  background-color: pink;
}

.container {
  background-color: orange;
}

<div class="container">hello</div>

Answer 3

Because it was minimum height, so height will be greater than 100vh. try to change min-height to max-height.