私は、html ルート要素と body 子要素が HTML ドキュメント内で相互作用する方法を調査してきました。CSS 2.1 仕様の次の抜粋では、ボックス モデルの余白が透過的であると述べられています。
http://www.w3.org/TR/CSS21/box.html#mpb-examples
LI ボックスの余白は透明です — 余白は常に透明です — そのため、UL パディングとコンテンツ領域の背景色 (黄色) が透けて見えます。
しかし、私が興味を持ったのは、余白が透明な場合、ルート要素、つまり html 要素に余白を与えると、この余白はデフォルトのブラウザー ユーザー エージェント キャンバスの色で表示されるはずだということです。ただし、以下のスニペットに示すように、これは当てはまりません。最上位の 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 ルート要素に関連する黒い境界線、body 要素に関連する緑のマージン、body 要素に関連するピンクのコンテンツを含むことがわかります。
この動作は、CSS 2.1 仕様のどこかに指定されていますか? もしそうなら、どこで？どこにも見つからないようです。
ありがとう。
編集：
BoltClock が以下で指摘しているように、この動作は CSS 2.1 仕様のセクション 14.2 で言及されています (そして、CSS3 仕様の Background and Borders モジュールに引き継がれています)。つまり、他の CSS 要素とは異なり、html 要素の背景もマージン領域をカバーします。
ただし、BoltClock も以下で指摘しているように、そのセクションでは、html 要素ではなく body 要素に背景色を設定する方が適切であると見なされることも指定しています。以下は、CSS 2.1 仕様からの関連する抜粋です。
ただし、HTML ドキュメントの場合は、作成者が HTML 要素ではなく BODY 要素の背景を指定することをお勧めします。ルート要素が HTML の「HTML」要素または「background-color」の「transparent」と「background-image」の「none」の値を計算した XHTML の「html」要素であるドキュメントの場合、ユーザー エージェントは代わりにキャンバスの背景を描画するときに、その要素の最初の HTML "BODY" 要素または XHTML "body" 要素の子から計算された背景プロパティの値。その子要素の背景を描画してはなりません。このような背景も、ルート要素のみに描画された場合と同じ位置に固定する必要があります。
元の HTML で、次のように html 要素の style 属性から background 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 のコンテンツ領域は 1 つのピンク色の領域として表示されます (ただし、body 要素に背景を割り当てることができ、もちろんコンテンツ領域をカバーします)。
いずれにせよ、この調査は純粋な関心のために行われました。すべての実際的な目的のために、通常は html 要素には何も設定せず、"* { margin: 0; border: 0; padding: 0; }" というルールを html および body 要素にフォールスルーして適用できるようにするだけです。 body 要素または body 要素内に含まれるラッパー div 内の背景。
よろしく。