【发布时间】：2013-11-13 22:45:22
【问题描述】：
我一直在研究html根元素和body子元素的方式 在 HTML 文档中进行交互。 CSS 2.1 规范中的以下摘录指出 盒子模型的边距是透明的，我们都知道。
http://www.w3.org/TR/CSS21/box.html#mpb-examples
LI 框的边距是透明的——边距总是 透明 — 因此 UL 填充的背景颜色（黄色）和 内容区域通过它们闪耀。
然而，让我好奇的是，如果边距是透明的，那么如果我给 根元素，即html元素，一个margin，这个margin应该透出来 默认浏览器用户代理画布颜色。但是，情况并非如此，如图所示 下面的sn-p。顶级 html 元素的边距似乎利用了 与其背景属性中指定的颜色相同。代码如下：
<!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>
在这里我们可以看到与 html 根元素有关的绿色边距，其中包含 与 html 根元素有关的黑色边框，包含与 html 根元素有关的绿色边距 到 body 元素，包含与 body 元素相关的粉红色内容。
这种行为是否在 CSS 2.1 规范中的任何地方指定？ 如果是这样，那么在哪里？我似乎在任何地方都找不到它。
谢谢。
编辑：
正如 BoltClock 在下面指出的，这种行为在 CSS 2.1 的第 14.2 节中有所提及 规范（并在 CSS3 规范的背景和边框模块中进行）。那 就是，与其他 CSS 元素不同，html 元素的背景也覆盖了 边距区域。
但是，正如 BoltClock 在下面也指出的那样，该部分还指定它是 被认为更适合在 body 元素上设置背景颜色，而不是 比在 html 元素上。以下是 CSS 2.1 规范的相关摘录：
但是，对于 HTML 文档，我们建议作者指定 BODY 元素而不是 HTML 元素的背景。为了 根元素是 HTML“HTML”元素或 XHTML 的文档 “html”元素的计算值为“透明” 'background-color' 和 'none' 对于 'background-image'，用户代理必须 而是使用该背景属性的计算值 元素的第一个 HTML“BODY”元素或 XHTML“body”元素的子元素 为画布绘制背景，不得绘制背景 对于那个子元素。这样的背景也必须锚定在 与仅为根部绘制相同的点 元素。
所以让我们尝试看看如果在我们的原始 HTML 中添加注释会发生什么 从 html 元素的 style 属性中取出背景 CSS 属性 如下：
<!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>
结果如下：
正如我们所见，body 元素的粉红色背景被传播到 整个 html 元素的框，从而覆盖 html 元素的边距，即 html 元素的边框（不是粉红色而是黑色，因为对于 html 元素 我们指定的边框是纯黑色的），以及body的margin元素 和显示为单个粉红色区域的正文内容区域（尽管 我们可以为 body 元素分配一个背景，它会覆盖 当然是内容领域）。
无论如何，这项调查是出于纯粹的兴趣而进行的。 出于所有实际目的，您通常不会为 html 设置任何内容 元素并且只允许规则“* {边距：0；边框：0；填充：0；}” 落入 html 和 body 元素并在 body 元素或包含在 body 元素中的包装 div 中。
问候。
【问题讨论】：