この日記はMozillaのプロダクトへの貢献者としての私の成果を中心に、気になったバグやWeb界隈の話題について書いていますが、 断り書きがある場合を除き、いかなる団体のオフィシャルな見解ではありません。あくまでも個人的なものです。 Mozilla Foundation、Mozilla Corporation、及び関連企業の公式情報ではないことに注意してください。

現在、XHTML 1.0 (もどき)から、HTML5なコンテンツに修正中です。古い日記は修正が完了していませんので表示が崩れます。 順次、修正していく予定ですのでしばらくお待ちください。

もずはっく日記(2012年1月)

2012年1月27日

<table>と<caption>のマージンの相殺
初回投稿日時: 2012年01月27日19時10分49秒
最終更新日時: 2012年01月27日19時23分36秒
カテゴリ: CSS
SNS: (list)

Fx10のリリース関連の情報を見ていて、ちょっと気になったので以下のようなテストをしてみました。

<style>
div {
  margin-bottom: 1em;
}

table {
  margin-top: 1em;
}

caption {
  margin-top: 1em;
}
</style>

<div>here is a div</div>
<table>
  <caption>caption</caption>
  <tr><td>cell</td><tr>
</table>

これを実際に表示した場合に、<div><caption>間のマージンは全て相殺されて1emになると考えました。でも、どのブラウザも2emで表示されました。以下、実例。

Here is a div
caption
cell

全て相殺されると考えたのは、以下のようなケースが頭にあったからです。

<style>
div {
  margin: 1em 0;
}
</style>

<div>Here is a div</div>

<div>
  <div>
    Here is a nested div
  </div>
</div>

当然、全てのmarginは隣接しているので相殺されて1emになります。

Here is a div
Here is a nested div

最初は理由がよく分からなかったんですが、仕様書の以下の文面ではっきりとしました。

The table wrapper box establishes a block formatting context.

Two margins are adjoining if and only if:

  • both belong to in-flow block-level boxes that participate in the same block formatting context

つまり、<table>の外側に自動的に生成される、table wrapper boxは別のブロックコンテキストを内部に生成するので、その内側にある<caption>のマージンはその外側のマージンとは相殺されない、ということです。

すなわち、比較すべきは以下の例だったわけです。

<style>
div {
  margin: 1em 0;
}
</style>

<div>Here is a div</div>

<div style="overflow: auto;">
  <div>
    Here is a nested div
  </div>
</div>

これなら、仕様に一貫性が出てきます。以下、実例。

Here is a div
Here is a nested div

table wrapper boxが何故新しいブロックレベルのコンテキストを生成するようになっているのかはまだ理解できていませんが。

関連するかもしれないエントリ

関連するかもしれないエントリを発見できませんでしたが、無いとは限りません。

このエントリへのリンク元