W3G

border-spacingプロパティの値

値は、"em", "px" などの単位識別子を伴う数値の長さで指定し、値を1つだけ指定する場合と値を2つ指定する場合の2種類の指定方法があります。

値を1つだけ指定した場合は、水平・垂直の両方向の枠線の間隔に適用されます。

2つ指定した場合は、「水平方向」「垂直方向」の順に枠線の間隔が適用されます。値を2つ指定する場合は、半角スペースで区切って続けて指定します。

border-spacingプロパティの実装状況

IE

◯：IE8よりサポート

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

Internet Explorer 6, 7はborder-spacingプロパティに対応していません。このため、IE6, 7に対してはtable要素の cellspacing属性を指定することでしかセルのボーダー間隔を調節することはできません。

CSS2 仕様における初期値は "0" なのですが、実際の主要視覚ブラウザの初期値は "1px" に設定されているようです。

サンプル

.separate {
border-collapse : separate ;
border-spacing : 5px 10px ;
}
table,th,td {
border : 1px solid #666 ;
}

半角スペース区切りで長さを2つ指定した場合、「水平方向」「垂直方向」の順に枠線の間隔が適用されます。このサンプル（border-spacing : 5px 10px ;）では、水平方向に "5px"、垂直方向に "10px" の枠線の間隔が指定されています。