Understanding the HTML versus BODY Element in CSS

Summary

• The html and body elements are distinct block-level entities, in a parent/child relationship.
• The html element's height and width are controlled by the browser window.
• It is the html element which has (by default) overflow:auto, causing scrollbars to appear when needed.
• The body element is (by default) position:static, which means that positioned children of it are positioned relative to the html element's coordinate system.
• In almost all modern browsers, the built-in offset from the edge of the page is applied through a margin on the body element, not padding on the html element.

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>

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>

<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>

<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>

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:

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:

• If you're one of those designers who likes fixed-width, centered pages, you can do this by setting a width on the body tag and centering it. (Example)
• Because body isn't positioned (or more accurately, it's position:static by default), setting a child element to height:100% causes it to be 100% of the height of the html element, not the body element. Thus, if you want something to be as tall as the body is (going down past the bottom of the page) use

  body { position:relative }

  (However, see also Tall Nav and Tall Content.)

• Hopefully it helps you understand exactly where margin and padding and border will be appear when applied to the html and body elements.