1

This one confuses me a bit. What is the default height of body element in HTML document?

I've read that the height of the body element is as height as it contents. Take a look at the following simple html document. I have no content in the body, but when I give background-color property to the body, it seems like it take the entire viewport since I can see the color on the whole screen.

So my question is.. when there is no other HTML element in the body, what is the default height of the body?

  1. Is it the same height as the viewport(100vh)?
  2. Is it the same height as its content. If yes, the body's height should be 0px when it has no content inside it, am i right? If it is 0px in this case, why am i seeing the body's background-color on the whole viewport?

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightgray;
      }
    </style>
  </head>
  <body>

  </body>
</html>
j08691
  • 204,283
  • 31
  • 260
  • 272
Zip
  • 5,372
  • 9
  • 28
  • 39

1 Answers1

1

CSS special-cases the rules for backgrounds applied to the body element:

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • What does this mean in layman's term? – Zip Aug 06 '20 at 21:06
  • That you'll see the background on the whole viewport even if the element is smaller. – Quentin Aug 06 '20 at 21:07
  • so HTML element takes its `background-color` from the body element and the `background-color` I am seeing is in fact the background color of the HTML element instead of the body? – Zip Aug 06 '20 at 21:12