W3docs
ru
Войти

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

Border-spacing — CSS свойство для задания расстояния между соседними ячейками таблицы. Примеры и описание.

CSS свойство border-spacing задаёт расстояние между границами соседних ячеек таблицы. Это CSS-аналог устаревшего HTML-атрибута cellspacing, но с большими возможностями: горизонтальные и вертикальные отступы можно задавать независимо.

На этой странице рассматривается, что делает border-spacing, при каких условиях оно применяется, какие значения принимает, а также несколько запускаемых примеров.

Когда применяется border-spacing

border-spacing работает только в модели раздельных границ — то есть когда border-collapse установлено в значение separate (по умолчанию). В этой модели каждая ячейка сохраняет собственную границу, что создаёт реальный зазор между ячейками, размером которого управляет это свойство.

При переключении на модель свёрнутых границ (border-collapse: collapse) соседние границы сливаются в одну общую, и зазора нет — поэтому border-spacing игнорируется. Если отступы кажется не работают, проверьте, что border-collapse не установлено в collapse.

Значения и синтаксис

border-spacing принимает одно или два значения длины:

  • Одно значение — устанавливает одинаковый зазор по горизонтали и вертикали (например, border-spacing: 20px).
  • Два значения — первое задаёт горизонтальный отступ, второе — вертикальный (например, border-spacing: 20px 30px).

Длины могут использовать любые единицы CSS (px, em, rem и др.). Отрицательные значения не допускаются, проценты также не принимаются.

Начальное значение0
Применяется кЭлементам table и строчным таблицам.
НаследуетсяНет
АнимируетсяДа. Величина отступа поддаётся анимации.
ВерсияCSS2
DOM Синтаксисobject.style.borderSpacing = "10px";

Синтаксис

Синтаксис CSS свойства border-spacing

border-spacing: length | initial | inherit;

Пример свойства border-spacing с одним значением:

Пример CSS свойства border-spacing только с одним значением

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      .table {
        border-collapse: separate;
        border-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Example of border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами »

Результат

Двухколоночная таблица с отступом 20px вокруг каждой ячейки

Ниже приведён ещё один пример с двумя значениями. Первое значение задаёт горизонтальный отступ, второе — вертикальный, поэтому зазор между столбцами отличается от зазора между строками.

Пример свойства border-spacing с двумя значениями:

Пример CSS свойства border-spacing с двумя значениями

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-spacing: 20px 30px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Попробуйте сами »

Теперь добавим стили к таблице из примера выше. Например, зададим background-color — это свойство устанавливает цвет фона элемента.

Пример использования border-spacing совместно со свойством background-color:

Пример CSS свойства border-spacing со свойством background-color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      .table {
        border-collapse: separate;
        border-spacing: 20px;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h1>Example of border-spacing: 20px;</h1>
    <table class="table">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписаниеПример
lengthЗадаёт расстояние между ячейками в px, em и др.Пример »
initialУстанавливает свойство в значение по умолчанию.Пример »
inheritНаследует значение свойства от родительского элемента.

Связанные свойства

  • border-collapse — определяет, разделены ли границы ячеек (тогда border-spacing работает) или свёрнуты.
  • empty-cells — управляет отображением границ и фона вокруг пустых ячеек в модели раздельных границ.
  • border-color — задаёт цвет границ ячеек, между которыми border-spacing создаёт отступ.
  • HTML tables — разметка, к которой применяются эти стили.

Практика

Практика
Какова функция свойства 'border-spacing' в CSS?
Какова функция свойства 'border-spacing' в CSS?
Was this page helpful?