Border spacing css что это

Свойство border-spacing

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

Синтаксис

Значения

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

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

Замечания

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

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

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

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

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

1	2	3
4	5	6
7	8	9

table < border-spacing: 10px; border-collapse: separate; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >

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

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

1	2	3
4	5	6
7	8	9

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 :

1	2	3
4	5	6
7	8	9

table < border-collapse: collapse; border-spacing: 10px 30px; width: 400px; border: 1px solid red; >td < border: 1px solid red; text-align: center; >

border-spacing

Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse .

Синтаксис

border-spacing: значение1 [значение2]

Значения

Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
 
1
2
 
 
3
4
 
 
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства border-spacing

border — spacing

Свойство для управления расстоянием между рамками ячеек таблицы.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 8 ноября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство border — spacing задаёт отступ между рамками ячеек таблицы.

Пример

Скопировать ссылку «Пример» Скопировано

 table  border-spacing: 10px;> table  border-spacing: 10px; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Разрешается указывать одно или два неотрицательных значения:

1. border — spacing : 1px — расстояние между ячейками со всех сторон одинаковое.
2. border — spacing : 1px 2px — первое значение задаёт расстояние между ячейками по горизонтали, второе — по вертикали.

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство border — spacing задаёт расстояние между ячейками таблицы. Это свойство работает только для таблиц со свойством border — collapse в значении separate .

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

border-spacing

CSS свойство border-spacing позволяет увеличивать или уменьшать расстояние между ячейками таблицы и общей рамкой таблицы.

По умолчанию браузеры обычно оставляют небольшое пустое пространство ( 2px ) между смежными ячейками таблицы, и, чтобы увеличивать или уменьшать его, можно использовать свойство border-spacing . Значение этого свойства обычно задается в пикселях. Можно указать два значения, если нужно отдельно настроить горизонтальное и вертикальное расстояние.

Если для ячеек таблицы задана рамка, то в местах соприкосновения ячеек линия будет в 2 раза толще, чем по краям таблицы. Чтобы предотвратить это, следует воспользоваться CSS свойством border-collapse.

Значение по умолчанию:	2px
Применяется:	к table и inline-table элементам
Анимируется:	да
Наследуется:	да
Версия:	CSS2
Синтаксис JavaScript:	object.style.borderSpacing=»15px»

Синтаксис

border-spacing: расстояние|inherit;

Значения свойства

• Если указано только одно значение, оно определяет расстояние, как по вертикали так и по горизонтали.
• Если указано два значения, первое устанавливает расстояние по горизонтали, второе по вертикале.