Giving background-color to body applying whole page. Why?
The main reason is because the HTML
takes the background-color
of BODY
since:
The background of the root element becomes the background of the canvas and covers the entire canvas [...]
So since the default background-color
of HTML
is transparent
it will take the one from BODY
. However applying a color to both the HTML
and BODY
elements you will see that the BODY
background doesn't cover the whole page anymore.
html {
background-color: blue;
}
body {
background-color: red;
}
<html>
<body>
<div>Hello World!</div>
</body>
</html>
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for
background-position
) at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.For HTML documents, however, we recommend that authors specify the background for the
BODY
element rather than theHTML
element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values oftransparent
forbackground-color
andnone
forbackground-image
, user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
From W3 - 14 Colors and Backgrounds.
height you see in inspect is
min-height
That is equal height's elementdiv
, background-color changemax-height
That is equal 100% his parents(html).
For Example:
change min-height
and run inspect and see result :
body {
background-color: red;
min-height: 200px;
}
<div>Hello World!</div>
So, You see height in inspect Change
200px;
But color red cover whole page.
CSS tricks has a related post in merit link . It seems that body styles are expanded to html because:
html is the root element of a document where body is a descendent contained within it. In fact, there is a :root selector in CSS. These target the exact same thing
it's actually pretty logic. First of all <html>
and <body>
tags are required tags in a webpage. Where the <html>
tag contains all of the <html>
code the <body>
tag holds all of the contents.
Consider this standard structure for a basic HTML
document:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and such -->
</head>
<body>
<!-- Where the content begins -->
<body>
</html>
The spec defines <html>
as the root element of a document, and we can clearly see that in the above example: the element is the very top level of all other elements. The buck stops there because there are no more levels beyond that from which styles can be inherited.
From there, and make up the only two elements that fall directly inside . In fact, the spec defines directly in contrast to since those are the only two elements that need to be distinguished.
So, the bottom line here is that is the root element of a document where is a descendent contained within it. In fact, there is a :root selector in CSS. These target the exact same thing.
It's tempting to think that any styles we want to be inherited across the board should be applied directly to <html>
because it is the root element of the document. <html>
supersedes <body>
in hierarchy, so it follows that it must contain all global styles.
But that's not exactly the case. In fact, inline attributes for the following were originally assigned to <body>
in the spec:
- background
- bgcolor
- marginbottom
- marginleft
- marginright
- margintop
- text
The background-color
There is a weird thing in CSS
where the background-color
on <body>
floods the whole viewport even if the metrics of the element itself don't cover that whole area. Unless the background-color
gets set on the html element, then it doesn't.
If flooding is the goal, it can be smart to just set it on the html
element to begin with.