Why does changing the body's background color change the entire page's background?

Question

I logged the height and padding values using this code:

jQuery( document ).ready( function() {

    console.log( jQuery('body').css('height') );
    console.log( jQuery('body').css('padding-top') );
    console.log( jQuery('body').css('padding-bottom'));

}); //end ready

This outputs:

20px
0px
0px

If the height of the body is only 20 pixels, why does the entire background of the browser change black when I use this CSS:

body {
    background: black;
}

I'm using Chrome as my browser. If you're curious as to how I ran into this question, I ran into a problem of adding a click event to the body that didn't ever seem to fire due to the body's default height.

Answer 1

A long time ago there was something called document.bgcolor, or something like that, that would let you set the background of the document itself, but that was deprecated.

Instead it was decided that setting document.body.style.backgroundColor, or in other words setting the background of the body, would also set the background color for the document automagically, as the document object has no style property, but it's still visible when the body/html elements does not completely cover the document, that's why the entire page goes black even if the body element does not cover the entire document.