CSS свойство border-spacing

CSS свойство border-spacing устанавливает расстояние между границами ячеек. Данное свойство применяется только в случае, если использовано свойство border-collapse со значением separate. Свойство border-spacing не работает, если установлено border-collapse со значением collapse.

Свойство border-spacing может быть установлено, используя одно или две значения длины. При наличии двух значений первое устанавливает горизонтальное расстояние, а второе - вертикальное. Если имеем одно значение, оно устанавливает и горизонтальное, и вертикальное расстояние в специфицированное значение. Отрицательные значения недопустимы.

Значение по умолчанию 0
Применяется К таблице и к строчным элементам таблицы.
Наследуется Нет
Анимируемое Да. Расстояние анимируемое.
Версия CSS2
DOM синтаксис object.style.borderSpacing = "10px";

Синтаксис

border-spacing: length | initial | inherit;

Пример с одним значением:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      table, td, th {
      border: 1px solid black;
      }
      .table {
      border-collapse: separate;
      border-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Имя</th>
        <th>Фамилия</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>

Другой пример с использованием двух значений. Первое задает горизонтальное расстояние, а второе - вертикальное.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>  
      table {
      border-spacing: 20px 30px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Заголовок</th>
          <th>Заголовок</th>
          <th>Заголовок</th>
          <th>Заголовок</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Текст</td>
          <td>Текст</td>
          <td>Текст</td>
          <td>Текст</td>
        </tr>
        <tr>
          <td>Текст</td>
          <td>Текст</td>
          <td>Текст</td>
          <td>Текст</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Далее установим стиль для границы. Например, можем добавить фоновой цвет:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      table, td, th {
      border: 1px solid black;
      }
      .table {
      border-collapse: separate;
      border-spacing: 20px;
      background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Имя</th>
        <th>Фамилия</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>

Значения

Значение Описание
length Устанавливает расстояние в единицах измерения CSS (px, em или %).
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

What does the CSS property 'border-spacing' do?
Считаете ли это полезным?