border-spacing

概要

CSS の border-spacing プロパティは、隣り合うセルのボーダー同士の距離を決めます（separate 形式のボーダー専用）。このプロパティは 表象的 HTML (presentational HTML) の属性 cellspacing に相当しますが、オプションの2番めの値を使うと縦横で別の距離を指定できます。

border-spacing 値が表の外周に沿って使われる場合、表のボーダーと最初/最後の列または行にあるセルとの距離は、縦横いずれか適当な側の border-spacing と、表の適当な側（上下左右のいずれか）のパディングの合計になります。

このプロパティは border-collapse が separate のときのみ適用されます。

構文

Formal syntax: <length> <length>?

border-spacing: length              /* 1 値構文 */
border-spacing: horizontal vertical /* 2 値構文 */

border-spacing: inherit 

値

length

縦横両方向のセル間距離を示す <length> 値です。 1 値構文でのみ使えます。

horizontal

横方向の隣接セル間の距離を示す <length> 値で、隣接する列間の距離になります。 2 値構文でのみ使えます。

vertical

縦方向の隣接セル間の距離を示す <length> 値で、隣接する行間の距離になります。 2 値構文でのみ使えます。

inherit

親要素の border-spacing の計算値を使うことを示すキーワードです。

例

実際の表示を確認

table { border-spacing: 10px 5px; }

仕様書

ブラウザ実装状況

関連情報

• テーブル関連 CSS プロパティ: caption-side、 table-layout、 border-collapse、 border-spacing、 empty-cells