2xup.org

body 要素の最初の内包要素に上マージンがある場合の body 要素デフォルトのマージン処理

各表示モードによる CSS 解釈の違いをまとめたドキュメントで『body 要素の最初の内包要素に上マージンがある場合の body 要素デフォルトのマージン処理』については僕自身がきちんと理解できていないためブログ記事内では解説やサンプルを引っ込めていたのですが、記載を残していた表へのフィードバックをいただきました (ありがとうございます！)。

さらに、body直下要素に上マージン その2：メモランダム を読んでしっかり理解できました。本当にありがとうございます！

サンプルも無くややこしい表現をしている状態でしたので、サンプルの共有、表の修正と詳細を用意します。

Windows IE の標準モードでは body 要素の最初の内包要素に上方向のマージンがある場合、表示域の上辺とその要素の上辺の間はマージンの折りたたみが発生せずbody 要素デフォルトのマージンに body 要素の最初の内包要素のマージンを加えた値となります (こちらはバグ)。Windows IE の後方互換モードと確認したその他のブラウザでは、マージンの折りたたみが発生しているかのように、body 要素デフォルトのマージンか body 要素の最初の内包要素のマージンの値が大きい方の値になります (こちらは正しい)。確認したその他のブラウザでは、body 要素デフォルトのマージンの値が無効となり body 要素の最初の内包要素のマージンの値となります。ポイントを書き出してみます。

body 要素デフォルトのマージンより body 要素の最初の内包要素のマージンの値が大きい場合のサンプルも共有しておきます。

body 要素デフォルトのマージン

共有ドキュメントではユーザーエージェントのスタイルシートで設定された body 要素のマージンを body 要素デフォルトのマージンとしています。確認を行ったブラウザでは margin: 8px; と設定されているのがほとんどのようで、例えば firefox-html.css や webkit.css を見てみると body 要素へのスタイル指定は以下のようになっています。

body {
  display: block;
  margin: 8px;
}

Windows IE 6 でも調べてみました。表示されたものを目視で判断するのはやや不安なので、デフォルトスタイルシートとなるファイルを探してみたのですが、解らなかったので、Internet Explorer Developer Toolbar を利用して、body 要素に設定されているスタイルを抜き出してみました。

Windows IE 標準準拠モード時に設定された body 要素のデフォルトスタイル

ほとんどのブラウザが、body 要素の margin を 8px としているのに対し、Windows IE は上下に 15px 左右に 10px としているのにも注目です。ちなみにほとんどのブラウザが設定している 8px という値は、CSS 2.1 の仕様書の Appendix D Default style sheet for HTML 4 からだと思います (CSS 2 の場合は padding: 8px;)。

body {
  display: block;
  margin: 15px 10px;
}

Windows IE 後方 (過去) 互換モード時に設定された body 要素のデフォルトスタイル

ここでも後方互換モード時に html 要素に設定されたスタイルが body 要素に引き継がれているようになっているのがわかります。これについてはhtml 要素へのスタイル定義のサンプルが参考になります。

body {
  display: block;
  margin: 15px 10px;
  border-style: inset;
  background-color: #ffffff;
  overflow-x: auto;
  overflow-y: scroll;
}

まだ理解しきれていなかったのでサンプルを引っ込めていたのですが、あわせて表からもはずしておくべきでした。また、この項目のみ結果の書き方を変更しています。