5

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.

HTML element and BODY element interactions

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:

HTML element and BODY element interactions

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.

4

1 回答 1

8

是的,它在第 14.2 节中:

根元素的背景成为画布的背景并覆盖整个画布,锚定在同一点(对于“背景位置”),就像它仅为根元素本身绘制时一样。根元素不会再次绘制此背景。

它在背景和边框模块的第 3.11 节中再次提到,它取代了 CSS2.1 的这一部分,所以这个特定的行为保持不变。

由于您提到了 html 和 body 元素之间的交互,请注意两个链接还包含有关在呈现 HTML 文档时在某些情况下应如何将 body 背景传播到根元素的详细信息。对于那些好奇的人,所有浏览器都遵循这一点;background它基于在 body 元素上设置和属性时使用背景绘制整个画布的传统行为bgcolor,因此它基本上是根据 CSS 指定的传统 HTML 行为(如果没有别的,则保持与旧网站的向后兼容性)。

于 2013-11-03T00:55:46.000 回答