Why some html and body properties have this behaviour?

Question

I'm trying to understand a few things.

First question:

Why there is a margin-top on the body?

html {
  height: 100%;
  background-color: red;
}
body {
  height: 100%;
  margin: 0;
  background-color: yellow;
}

<h1>Hello Plunker!</h1>

If I look with dev tool inspector in Chrome, it shows me that the h1 top margin starts outside the body top margin (picture shows the h1 highlighted):

Second question:

In the next example, why does the yellow color is drawn outside the body?

I expected to see yellow color only within the body element, given that I set overflow property:

body {
  height: 100px;
  background-color: yellow;
  margin: 0;
  overflow: hidden;
}

Third question

If I add a background-color on the html element, it works, the yellow color fills only the body element, why?

html {
  background-color: red;
}
body {
  height: 100px;
  background-color: yellow;
  margin: 0;
  overflow: hidden;
}

Answer 1

Your First Question

Why there is a margin-top on the body?

Answer Is It is because of h1 tag, h1 takes margin from top and bottom. Your point is appriciatable that html (red color) is showing. Its the default behavior. it will work fine when you add float to h1

h1{float: left;}  

Your Second Question

I expected to see yellow color only within the body element, given that I set overflow property

Answer Is

overflow only works when you apply fix width/height to any tag/class.

if you apply overflow hidden to html/body it doesn't works, i think its the default behavior of the browser like firefox as well as others may be. Because same thing happened to me as well.

Third Questions answer also summarized in Answer of Second Question

i hope it would be helpful. Thanks