Title

border-spacingとは

border-spacing とは次の二つの語句からなるCSSのプロパティです。

border

読み: ボーダー
意味: 境界線

spacing

読み: スペーシング
意味: 間隔

目次に戻る

border-spacingプロパテイの概要

このプロパティは、HTMLの table要素 内の各セル要素の間にあるセパレーターの間隔を指定することができます。 つまり、table要素内で隣接するth要素やtd要素の表示間隔を指定するためのプロパティということになります。

プロパティの効果が適用されるための条件として、 border-collapse プロパティの値が初期値のseparateになっている必要があります。

境界線の表示間隔の設定値には、単位付きの数値を指定します。 単位の詳しい説明は、 CSSの単位について を参照していただければ幸いです。

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このプロパティはtable要素とinline-table要素に対して有効です。 プロパティの有効性を検証する為にtableを作成して説明していきます。

準備: table要素の境界線を表示する

table要素は初期の状態では border が表示されません。これではサンプルの検証に 不便なので境界線が表示されるようにCSSで設定しておきます。

table,th,td{
	border: 1px solid black;
}

table,th,td{
	border-width: 1px;
	border-style: solid;
	border-color: black;
}

この2つのCSSコードは同じ意味となります。参考としてborderという総合プロパティを使った場合と、個別プロパティを使った場合で掲載しておきます。

• border-width: 1px;　境界線は1ピクセルです
• border-style: solid;　境界線の種類は1本線です。
• border-color: black;　境界線の色は黒です。

また、冒頭でも述べましたが、このプロパティは、border-collapseプロパティの値が separateになっている必要があります。 ただし、border-collapseプロパティの初期値は、separateであるため、下記コードは必須ではありません。

table{border-collapse: separate;}

目次に戻る

構文

border-spacingプロパティの設定値は一つまたは、二つの値を指定することができます。
値が一つの場合は上下左右の両方向に指定する事ができ、値が二つの場合には左右と上下方向の間隔を指定することができます。 また、左右上下の間隔を指定する時に、最初の数値が左右の間隔で後の数値が上下の間隔の設定値となります。

セレクター{border-spacing: 設定値}

初期値: 0

まず、初期値の効果を見る前にtable要素にborder-spacingプロパティを使用していない場合を見てみましょう。 下記の表のようにセル要素の間にセパレーターの部分があり、空間が開いているのがわかります。

次に、初期値の0を指定した場合を見てください。下記の表のようにセルとセルの間隔は開いていないのですが、 セパレーターは存在している状態です。

table{border-spacing: 0;}

目次に戻る

数値: 一つだけ数値を指定した場合

数値を一つ指定すると、セル間の上下左右方向の両方へ間隔を設定することができます。

table{border-spacing: 10px;}

目次に戻る

数値: 二つ数値を指定した場合

数値を二つ指定することにより、セル間の左右方向と上下方向、それぞれに間隔を設定することができます。 先に設定した数値が左右方向で、後に指定した数値が上下方向になります。 指定する値は、半角スペースで区切ります。 また、マイナスの値は指定することはできません。

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

目次に戻る

グローバル値

border-spacingプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値の0に戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

セレクター{border-spacing: グローバル値;}

目次に戻る

補足説明

• tableと inline-table要素に適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-spacing: 0;

border-spacing: 10px;

border-spacing: 3em 1em;

目次に戻る