files/ja/web/css/border-spacing/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

---
title: border-spacing
slug: Web/CSS/border-spacing
tags:
  - CSS
  - CSS プロパティ
  - CSS 表
  - リファレンス
  - recipe:css-property
browser-compat: css.properties.border-spacing
translation_of: Web/CSS/border-spacing
---
{{CSSRef}}

**`border-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{htmlelement("table")}} における隣り合うセルの境界同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が `separate` のときのみ適用されます。

{{EmbedInteractiveExample("pages/css/border-spacing.html")}}

`border-spacing` の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する `border-spacing` と、表の対応する側 (上下左右のいずれか) の {{cssxref("padding")}} の合計になります。

> **Note:** `border-spacing` プロパティは、`<table>` 要素における非推奨の `cellspacing` 属性と同等ですが、任意で 2 つ目の値を指定して、水平方向と垂直方向に異なる間隔を設定することができる点が異なります。

## 構文

```css
/* <length> */
border-spacing: 2px;

/* 左右の <length> | 上下の <length> */
border-spacing: 1cm 2em;

/* グローバル値 */
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: unset;
```

`border-spacing` プロパティは 1 つまたは 2 つの値で指定することができます。

- **1 つ**の `<length>` 値が指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。
- **2 つ**の `<length>` 値が指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う*列*の間隔) を定義し、2 番目の値がセル間の上下方向の間隔 (つまり、隣り合う*行*の間隔) を定義します。

### 値

- {{cssxref("&lt;length&gt;")}}
  - : 固定値による間隔の大きさです。

## 公式定義

{{CSSInfo}}

## 形式文法

{{csssyntax}}

## 例

<h3 id="Spacing_and_padding_table_cells">表のセルの余白とパディング</h3>

この例では表のセル間において、垂直方向に `.5em`、水平方向に `1em` の間隔を適用します。なお、外の辺においては、表の `padding` の値が `border-spacing` の値に追加されます。

#### HTML

```html
<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
  <tr>
    <td>7</td><td>8</td><td>9</td>
  </tr>
</table>
```

#### CSS

```css
table {
  border-spacing: 1em .5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}
```

#### 結果

{{ EmbedLiveSample('Spacing_and_padding_table_cells', 400, 200) }}

## 仕様書

{{Specifications}}

## ブラウザーの互換性

{{Compat}}

## 関連情報

- {{cssxref("border-collapse")}}, {{cssxref("border-style")}}
- `border-spacing` プロパティは HTML の {{htmlelement("table")}} 要素の出現方法を変更します。