Why do some html and body properties have this behavior?

Question

I am trying to understand a few things.

First question:

Why is there 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 the help of the developer tool inspector in Chrome, it shows me that the top field h1 starts beyond the top edge of the body (the image shows the selection h1 ):

Second question:

In the following example, why is yellow painted outside the body ?

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

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

Third question

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

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

Answer 1

Your first question

Why is there a top edge on the body?

Answer It is because of the h1 tag that h1 occupies the edge above and below. Your dot is appriciatable showing html (red). Its default behavior. it will work fine if you add float to h1

 h1{float: left;} 

Your second question

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

Answer

overflow only works when you apply the width / height of the patch to any tag / class.

if you use overflow hidden in html / body, it does not work, I think that its default behavior in a browser such as Firefox, as well as others may be. Because the same thing happened to me.

The third question answer is also summarized in response to the second question

Hope this would be helpful. Thanks

Answer 2

Set the field: from 0 to h1 and add an addition instead, it will solve your problem.