---
title: border-spacing
slug: Web/CSS/border-spacing
tags:
  - CSS
  - CSS テーブル
  - CSS プロパティ
  - CSS 表
  - Reference
  - リファレンス
translation_of: Web/CSS/border-spacing
---
<div>{{CSSRef}}</div>

<p>CSS の <strong><code>border-spacing</code></strong> プロパティは、 {{htmlelement("table")}} における隣り合うセルの枠線同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が <code>separate</code> のときのみ適用されます。</p>

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

<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

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

<div class="note">
<p><strong>メモ:</strong> <code>border-spacing</code> プロパティは、 <code>&lt;table&gt;</code> 要素の非推奨になった <code>cellspacing</code> 属性と同等ですが、任意で2つ目の値を指定して、左右方向と上下方向に異なる間隔を設定することができる点が異なります。</p>
</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: css no-line-numbers">/* &lt;length&gt; */
border-spacing: 2px;

/* 左右の &lt;length&gt; | 上下の &lt;length&gt; */
border-spacing: 1cm 2em;

/* グローバル値 */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;
</pre>

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

<ul>
 <li><code>&lt;length&gt;</code> 値が<strong>1つ</strong>指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。</li>
 <li><code>&lt;length&gt;</code> 値が<strong>2つ</strong>指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う<em>列</em>の間隔) を定義し、2番目の値がセル間の上下方向の間隔 (つまり、隣り合う<em>行</em>の間隔) を定義します。</li>
</ul>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>固定値による間隔の大きさです。</dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Example" name="Example">例</h2>

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

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;7&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: 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;
}
</pre>

<h3 id="Result" name="Result">結果</h3>

<p>{{ EmbedLiveSample('Example', 400, 200) }}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.border-spacing")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

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