CSS - table と caption の margin

table と caption の margin がどうレンダリングされるかのテストです。
Tried at 2008-08-13

まず，マークアップは次の通り

<p>テキストテキスト</p>
<table>
  <caption>サンプル（ここがcaption）</caption>
  <tr>
    ......
  </tr>
</table>

table に margin-top: 50px;

テキストテキスト

サンプル（ここがcaption）
A B C
101 102 103
201 202 203 
table {
  margin-top: 50px;
}

table に margin-top: 50px;　caption に margin-top: 30px; margin-bottom: 30px;

テキストテキスト

サンプル（ここがcaption）
A B C
101 102 103
201 202 203 
table {
  margin-top: 50px;
}

table caption {
  margin-top: 30px;
  margin-bottom: 30px;
}

caption に margin-top: 30px; margin-bottom: 30px;

テキストテキスト

サンプル（ここがcaption）
A B C
101 102 103
201 202 203 
table {
  margin-top: 50px;
}

table caption {
  margin-top: 30px;
  margin-bottom: 30px;
}

table に margin-top: 50px;　caption に margin-bottom: 30px;

テキストテキスト

サンプル（ここがcaption）
A B C
101 102 103
201 202 203 
table {
  margin-top: 50px;
}

table caption {
  margin-top: 0;
  margin-bottom: 30px;
}

クロスブラウザ

テキストテキスト

サンプル（ここがcaption）
A B C
101 102 103
201 202 203 
p {
  margin-bottom: 50px;
}

table {
  margin-top: 0;
}

table caption {
  padding-bottom: 10px;
}