What is the difference between applying css rules to html compared to body?

Question

I don\'t see the difference between:

html {
    background: #f1f1f1;
}

and

body {
    background: #f1f1f1;
}

Answer 1

Someone wrote here that is always 100% height but it is not true!

Try to do (tested on FF4):

html{
    background:yellow;
}
body{
    background:red;
    height:100px;
}

color affects color only when doesn't have color set. The most annoying thing here is when has color and don't, some browser versions will have trouble with last direct child block element with margin. Color will be cut after the element and margin will be of color. It is always true when color is set.

On the other hand, when background is set, can have for example margins. This is simply mess.

Best practice so far is to apply background color, fonts etc to both. Simply every time you will write:

body{}

change it to:

body,html{}

Don't use any CSS box-model properties on and (or leave it unmodified at all, just to have peace of mind). Create inner element (may be of width 100%) and work with it instead.