tableとcaptionのmarginについて

tableの表題を示すとき、caption要素を使うのですが、このtableとcaptionにmarginを指定すると、ブラウザ間での表示に差異がでてしまいます。

tableにmargin-topを指定した場合

 
<p>テキストテキスト</p>
<table>
    <caption>キャプション</caption>
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>
 

 
table {
    margin-top: 20px;
}
 

Firefoxのみcaptionとtableの間にmargin-topが入り、その他のブラウザではcaptionの上に入ります。どっちの表示が正しいのだろうと思い調べてみたら、Tables in the visual formatting model - Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specificationに詳しい説明が載ってました。

この仕様によると、captionの上にmarginが入るみたいで、Firefoxのレンダリングが正しくないということになります。

クロスブラウザでcaption上部の余白をつけたい場合

caption上部の余白をつけたい場合、tableの前の要素にmargin-bottomを指定する方法が無難だと思います。今回の場合だと、p要素にmargin-bottomを指定するということですね。

 
p {
    margin-bottom: 20px;
}
 

caption上部の余白をつけたサンプル

オススメはしませんが・・・

何らかの理由で、tableの前の要素にmargin-bottomが指定できない場合は、captionにネガティブマージンを使うという方法もあります。ですが、これはあまりおすすめしません。ブラウザによって1px程、marginのずれが生じる（クロスブラウザではない）ので。

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

ネガティブマージンを使ってcaption上部の余白をつけたサンプル

captionにmarginをかけた場合

次にcaptionにmargin（上下左右）を指定してみます。

 
caption {
    margin: 10px;
}
 

1段目のFirefox3・IE8・Opera9.6は上下左右にmarginがかかっています。仕様通りの正しいレンダリングですね。2段目のSafari3・Google Chrome2は下のmarginはちゃんとcaptionの下にかかっているのですが、上marginもcaptionの下にかかってしまっています（top・bottom合わせて20pxのmarginが下にかかっている）3段目のIE6・7に関しては、captionにはmarginがかからないみたいです。

tableとcaptionの間に余白をつけたい場合

captionに背景色や背景画像を使っていないなら、paddingで余白をつけます。

 
caption {
    padding: 10px;
}
 

tableとcaptionの間に余白をつけたサンプル1

captionに背景色や背景画像を使っているなら、その背景色（背景画像）をcaptionの子要素（下例だとspan要素）に指定しなおして、paddingで余白をとります。

 
<caption><span>キャプション</span></caption>
 

 
caption {
    padding: 10px;
}
 
caption span {
    display: block;
    background-color: #EAF2AC;
}
 

tableとcaptionの間に余白をつけたサンプル2

まとめ

• ・caption上部の余白をつけたい場合は、前の要素のmargin-bottomを指定
• ・tableとcaptionの間に余白をつけたい場合は、captionのpadding-bottomを指定

ということになります。table と caption の margin | d-spicaで詳しい解説が載っていますのでこちらもご覧ください。