# Свойство border-spacing

Свойство `border-spacing` задает отступ между ячейками `td` или ячейками `th` HTML таблицы (и между границей ячейки и самой таблицы). Значением свойства служат любые единицы для размеров, кроме процентов.

## Синтаксис

`селектор { border-spacing: одно или два значения; }`

## Значения

Значение | Описание
--- | ---
одно значение | Одно значения задает одинаковые отступы между ячейками по вертикали и по горизонтали.
два значения | Первое значение задает отступ по горизонтали, а второе значение - отступ по вертикали.

Значение по умолчанию: `0`. Однако, каждый браузер имеет свое, ненулевое значение атрибута `cellspacing`, поэтому по умолчанию вы увидите отступы между ячейками.

## Замечания

Применяйте свойство для таблиц, а не для ее ячеек (для ячеек не будет работать).

Аналогичного эффекта нельзя добиться с помощью `margin`, так как `margin` для ячеек таблицы не работает.

Если задано свойство `border-collapse` в значении collapse - `border-spacing` работать не будет.

## Пример . Одно значение

Давайте сделаем отступы между ячейками (и между ячейкой и границей таблицы) в `10px`:

`<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>` `table { border-spacing: 10px; border-collapse: separate; width: 400px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }`

:

## Пример . Два значения

А теперь сделаем отступы в `10px` по горизонтали и `30px` по вертикали:

`<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>` `table { border-spacing: 10px 30px; border-collapse: separate; width: 400px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }`

:

## Пример . Зададим border-collapse: collapse

А вот теперь `border-spacing` работать не будет из-за свойства `border-collapse` в значении `collapse`:

`<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>` `table { border-collapse: collapse; border-spacing: 10px 30px; width: 400px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }`

:

←→
↑