The html and body dimensions are more accurately
shown by their outlines. Their height and background colours only expand
to fill their content's area, as shown by the body,
h1 and p elements. The
html element's background colour fills the entire viewport
even though its height does not. By default, the width and
background-colour of each element extends to the full width
of the viewport (less the body's' margin).
The area filled by the background, and the element's height, can be
changed using the
background-clip property from content-box to
border-box or padding-box.
Note that the
CSS specifications
advise against setting the background-color for the
html element; instead, set it on the body and it will
propagate up to the html element. This behaviour is specific
to the html, body relationship and is not true
of every parent/ child relationship. (Turn off
the html elements background-color using the
WebDev tools and the entire viewport will fill with the
body colour. )
By default, the browsers add margins to the body (8px). They
add margins and paddings to other elements relative to their root font
size. The margins are transparent, the element's
background-colour does not extend to them, rather the colour
of their parent's or earlier ancestor's background will show through. For
example, the top margin of the h1 element has the
html element's background colour while it's bottom margin is
filled with the body element's colour.