表

border-spacing

border-spacing は、表のセルとセルの間をどれだけ空けるかを指定します。

構文

<length [0,∞]>{1,2}

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  border-spacing: 0.5em 0.25em;
}

横（1 つ目の値）0.5em

縦（2 つ目の値）0.25em

長さを 1 つか 2 つ、スペースで区切って書きます。1 つ目が横の間隔、2 つ目が縦の間隔です（border-spacing: 8px 4px）。1 つだけ書くと、両方が同じ値になります。負の値と % は使えません。

初期値は 0 ですが、HTML の table 要素にはブラウザの既定のスタイルで 2px が指定されています。

border-collapse: collapse のときは効きません。セルの枠線が重なって 1 本になるので、間が空かなくなります。
外側のセルと表の枠線の間にも、同じだけ間が空きます（表に padding があれば、それに足されます）。空いたところには表の背景が見えます。
gap は縦（行の間）が先ですが、border-spacing は横が先です。
継承するプロパティですが、table 要素には既定のスタイルで値が指定されているので、表を囲む要素に書いても表には届きません。table 要素そのものに書きます。

このページのプレビューでは、箱の中に表を置き、表に inherit を指定して箱に書いた値を受け取らせています。見出しのセルに色を付けているので、セルの間に表の白い背景が見えます。