The <html>
and <body>
tags both come with some non-default behavior that you know from other tags.
Do not try to style html
or body
for positioning, width/heigth, or similar. Every browser has its own caveats and you can not test them all.
Generally speaking:
- Use the
html
tag to define your page's default background color (because on short pages or large screens, yourbody
may not be as tall as the browser window). - Use the
html
tag to define a basefont-size
so you can userem
units Show archive.org snapshot in CSS. - Use either
html
orbody
tag to definefont-family
andcolor
- Use a
div
inside thebody
for anything else (width, positioning, you name it).
Some extra information:
- 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.
- Events triggered on an element bubble up to
body
, thenhtml
, then thedocument
. Thedocument
has no visual representation on the page.
Further reading
- There is a way to stretch a page to full window height
Posted by Dominik Schöler to makandra dev (2016-07-20 10:35)