Menu
I have been investigating the way in which the html root element and the body child element interact in an HTML document. The following excerpt in the CSS 2.1 specification states that in the box model margins are transparent, which we all know.
http://www.w3.org/TR/CSS21/box.html#mpb-examples
The margins of the LI boxes are transparent — margins are always transparent — so the background color (yellow) of the UL padding and content areas shines through them.
However, what has made me curious is, if margins are transparent, then if I give the root element, namely the html element, a margin, this margin should show through the default browser user agent canvas color. However, this is not the case as shown by the snippet below. The margin of the top-level html element seems to make use of the same color as the one specified in its background property. Here is the code:
<!doctype html>
<html style="margin: 40px; border: 1px solid black; background: green;">
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
* { margin: 0; border: 0; padding: 0; }
</style>
</head>
<body style="margin: 40px; width: 400px; height: 300px; background: pink;">
</body>
</html>
Here we can see the green margin pertaining to the html root element, containing the black border pertaining to the html root element, containing the green margin pertaining to the body element, containing the pink content pertaining to the body element.
Is this behavior specified anywhere in the CSS 2.1 specification? If so, then where? I can't seem to find it anywhere.
Thanks.
EDIT:
As BoltClock pointed out below, this behavior is mentioned in section 14.2 of the CSS 2.1 specification (and is carried on to the CSS3 spec's Background and Borders module). That is, unlike for other CSS elements, the background of the html element also covers the margins area.
However, as BoltClock also pointed out below, that section also specifies that it is considered more appropriate to set the background color on the body element rather than on the html element. Here is the relevant excerpt from the CSS 2.1 spec:
For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
So let us try and see what happens if in our original HTML we comment out the background CSS property from the html element's style attribute as follows:
<!doctype html>
<html style="margin: 40px; border: 1px solid black; /* background: green; */">
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
* { margin: 0; border: 0; padding: 0; }
</style>
</head>
<body style="margin: 40px; width: 400px; height: 300px; background: pink;">
</body>
</html>
Here is the result:
As we can see, the pink background from the body element is propagated to the entire html element's box, thus covering the html element's margin, the html element's border (which is not pink but black because for the html element the border we specified is solid and black), and the body's margin element and the body's content area which appear as a single pink area (although we could assign a background to the body element and it would cover the content area of course).
In any case, this investigation has been carried out because of pure interest. For all practical purposes you normally wouldn't set anything for the html element and would just allow the rule "* { margin: 0; border: 0; padding: 0; }" to be fall through to the html and body elements and apply a background on the body element or within a wrapper div contained within the body element.
Regards.
609
Yes, it's in section 14.2:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
It's mentioned again in section 3.11 of the Backgrounds and Borders module, which supercedes this section of CSS2.1, so this specific behavior remains unchanged.
Since you mention interactions between the html and body elements, note that both links also contain details on how the body background should be propagated to the root element in certain circumstances when rendering an HTML document. And for those curious, all browsers follow this to the letter; it's based on the traditional behavior of painting the entire canvas with the background when you set the background and bgcolor attributes on the body element, so it's basically traditional HTML behavior specified in terms of CSS (to maintain backward compatibility with legacy sites if nothing else).
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
