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

<table>と<caption>のマージンの相殺
初回投稿日時: 2012年01月27日19時10分49秒
最終更新日時: 2012年01月27日19時23分36秒
カテゴリ: CSS
SNS: Tweet (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で表示されました。以下、実例。

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

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

<div>Here is a div</div>

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

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

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

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>

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

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