I've always been interested in the subtle differences between the HTML and BODY elements when it comes to CSS. Many designers reference the two elements interchangeably in their stylesheets. Often times it's perfectly ok to place properties in either one, but there are certain instances where you'll want to chose one over the other.
Default Rendering of HTML and BODY Elements
By default, all major browsers assign the BODY element a margin of 8px. We often see this in CSS resets, setting the margin back to 0px. As far as I'm aware there is no other default CSS applied to either elements other than your usual font-size, color etc. The HTML element, in comparison, has a margin set to 0px. Also neither of the two elements have padding, which is often seen in CSS resets as well.
html { margin: 0px; }
body { margin: 8px; }
Overflow/Scrollbars
Another thing I like to place in my stylesheets is some CSS to always display browser scrollbars. I do this because it annoys me when I browse to one page that has a lot of content and then browse to another page that has little content, and my main content DIV is bouncing back and forth. In order to fix this you need to place 'overflow-y: scroll;' on your HTML element. If this property is assigned to the BODY element, nothing happens and it will not work, thus another big difference between the two elements.
html { overflow-y: scroll; }
Scrollbar Colors: HTML or BODY?
In Internet Explorer the scrollbar color properties need to be applied to the HTML element rather than the BODY element in order to work. Safari has also added scrollbar styling in their recent build, so we'll have to see how they implemented this as well.
html
{
scrollbar-face-color: #000;
scrollbar-highlight-color: #ccc;
scrollbar-3dlight-color: #999;
scrollbar-darkshadow-color: #666;
scrollbar-shadow-color: #555;
scrollbar-arrow-color: #fff;
scrollbar-track-color: #ddd;
}
Background Images and Colors
Another major difference between the HTML element and the BODY element is background-colors and background-images. The BODY element mimics the default behavior of a DIV element. It's height relies on the content within it. The HTML element on the other hand, spans the entire viewport regardless of the content within it. If you set a background-image to the BODY element and position it bottom, it may not have the desired effect you intended, while the HTML element's background-image will fall at the bottom of the screen regardless of the content within it.
In Conclusion
Probably the biggest take-away from this article would be background-images. I almost always use both the HTML and BODY elements to apply background-images to, and it's good to remember that the BODY element may not always hit the 'bottom' of the viewport.
Know of any other differences? Share your thoughts below...
