Understanding the HTML versus BODY Element in CSS

Summary

Introduction

Many web developers do not understand the difference between applying style to the body element versus the html element. Most of the time these authors will apply style only to the body element; when that's not sufficient, they'll spam all sorts of styles on both html and body until the page happens to look correct.

The confusion is understandable. In the beginning, both were treated similarly, with (now-deprecated) attributes like bgcolor being applied to the body tag, affecting the whole page.

This article attempts to enlighten you, Web Developer, to fully grok how these two elements are used in modern web browsers.

Content in a Block

First, let's look at how block-level elements behave when they have content in them:

<div style="border:3px double orange; background:#cdf">
  <p>These paragraphs are inside a div (a block-level element).</p>
  <p>Note how the div grows in height to accommodate its content.</p>
</div>

These paragraphs are inside a div (a block-level element).

Note how the div grows in height to accommodate its content.

From the above, we can see that block-level elements which don't have a specific height applied to them automatically grow in height to accommodate their content. What happens when a height is applied? It depends on the value of the CSS overflow property:

<div style="... height:2em; overflow:visible">
  <p>These paragraphs are inside a fixed-height div.</p>
  <p>This paragraph is overflowing and <code>visible</code>!</p>
</div>

These paragraphs are inside a fixed-height div.

This paragraph is overflowing and visible!

<div style="... height:2em; overflow:hidden">
  <p>These paragraphs are inside a fixed-height div.</p>
  <p>This paragraph is overflowing and <code>hidden</code>!</p>
</div>

These paragraphs are inside a fixed-height div.

This paragraph is overflowing and hidden!

<div style="... height:5em; overflow:auto">
  <p>These paragraphs are inside a fixed-height div.</p>
  <p>This paragraph is overflowing and <code>scrolled</code>!</p>
  <p>(Here's another paragraph ... </p>
</div>

These paragraphs are inside a fixed-height div.

This paragraph is overflowing and scrolled!

(Here's another paragraph so I can make this block extra tall, so the scrollbar is sure to be drawn properly in almost all browsers, and yet make sure that it actually DOES appear.)

Note that IEWin renders that first example (overflow:visible) wrong. The div should not increase in height when overflow:visible is used; the background and border should be drawn as though the extra content was not there, and the content simply drawn outside the bounds. View this page in Mozilla/Firefox/Safari/Opera to see how it should appear.

Of particular relevance to the upcoming discussion is overflow:auto. See how it allows you to have a scrollbar appear on any block-level item? That'll be important.

Mommy, Where Do Scrollbars Come From?

On any non-trivial HTML page, there's enough content that the page gets a scrollbar on the side. Where does this scrollbar come from? Magic? An unholy tryst between UI widgets? Maybe. Or maybe it's the simple result of an implicit CSS rule like:

html { overflow:auto }

"But the html element doesn't have a height!" you cry, confused. "How can it generate scrollbars, if it's a block-level element without a specific height?"

The html element is a little bit special. Its height and width are governed by the window/frame it's in. When you increase your window width, the fixed width of the html element is increased; when you make the window taller, so increases the height of the html element.

Because pictures often help, let's see what it would look like if the html element could have overflow:visible:

A rectangle representing the boundaries of the html tag. Another rectangle is inset on the left, top, and right edges, but goes far past the bottom edge; this rectangle represents the content of the body tag.

Hopefully this picture helps, rather than confuses. See how the html element (in red) goes to the edges of the window, but the body overflows that container? The html element is responsible for showing the scrollbar for the 'page' when the content gets too tall.

So What?

What does this mean for you? A couple things: