【CSS Modules】border-spacingプロパティの使い方

border-spacingプロパティは、HTMLの<table>要素内で、隣接するセル（<th>や<td>）の間に存在する境界線の間隔を設定するプロパティです。このプロパティを使用すると、テーブルのセル同士がどれくらいの距離を置いて表示されるかを調整できます。ただし、このプロパティが有効になるのは、<table>要素のborder-collapseプロパティがseparate（境界線を分離して表示する）に設定されている場合に限られます。もしborder-collapseプロパティがcollapse（境界線を結合して表示する）に設定されていると、セル間の境界線は結合されてしまうため、border-spacingプロパティによる間隔の指定は無視され、効果を発揮しません。

値の指定方法には、主に二通りあります。一つは、一つの長さを指定する方法です。例えばborder-spacing: 10px;のように指定すると、テーブル内のすべてのセルにおいて、水平方向（左右）と垂直方向（上下）の両方に同じ10pxの間隔が適用されます。もう一つは、二つの長さを指定する方法です。この場合、最初の長さが水平方向（左右）の間隔を、二番目の長さが垂直方向（上下）の間隔を指定します。例えばborder-spacing: 5px 15px;と指定すると、左右のセル間には5px、上下のセル間には15pxの間隔が設けられます。これらの長さは、pxやemなどのCSSで一般的に使用される単位で指定できます。border-spacingプロパティを適切に利用することで、テーブルの視認性を高め、より読みやすいデザインを実現することが可能です。

Copy
1table {
2  border-spacing: 10px 20px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません