I'm on a quest for understanding some mysteries.
First riddle:
Why does the body have a mysterious margin-top?
html {
height: 100%;
background-color: red;
}
body {
height: 100%;
margin: 0;
background-color: yellow;
}<h1>Hello Plunker!</h1>Using dev tools in Chrome reveals an intriguing phenomenon where the top margin of h1 extends beyond the boundary of body:
https://i.sstatic.net/sgvnq.jpg
Second enigma:
In this peculiar scenario, why does the yellow hue spill outside the confines of body?
I anticipated that the yellow color would stay contained within the body as per the overflow property declaration:
body {
height: 100px;
background-color: yellow;
margin: 0;
overflow: hidden;
}The third conundrum
If a mystical background-color is bestowed upon the sacred html element, it miraculously contains the yellow aura within the realm of body, but why?
html {
background-color: red;
}
body {
height: 100px;
background-color: yellow;
margin: 0;
overflow: hidden;
}