css властивість border-spacing


Властивість border-spacing задає відстань між кордонами сусідніх комірок (тільки для моделі separated borders). Це не працюватиме в разі, коли для таблиці встановлено властивість border-collapse із значенням collapse.

Властивість `border-spacing`

Без задання в таблиці HTML використовується "розділена гранична модель". Це дає певний ефект "подвійного кордону", коли між границями кожної клітинки є пробіл, а також краю таблиці (якщо у вас також є межа елемента таблиці).

Значення border-spacing також використовується уздовж зовнішнього краю таблиці, де відстань між межами таблиці та комірок у першому / останньому стовпчику або рядку є сумою відповідного (горизонтального або вертикального) border-spacing, а також відповіднього (верхній, правий, нижній або лівий) поля (padding).

Нотатка:

Властивість border-spacing еквівалентна атрибуту cellspacing для <table>, що не підтримується клітинами, за винятком того, що у нього є додаткове додаткове значення, яке можна використовувати для встановлення різного горизонтального та вертикального інтервалів.

Синтаксис

border-spacing: length|initial|inherit;

Властивість border-spacing може отримувати 3 значення:

length

Відстань між комірками. Якщо значень два, то перше визначає горизонтальну відстань, а друге - вертикальну.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивостей від свого батьківського елемента

Значення без задання: 0
Наслідує: Так
Анімується: Ні
JavaScript синтаксис: object.style.borderSpacing="15px"

Переглядачі

Переглядач
border-spacing

1.0

8.0

1.0

1.0

4.0

12.0

Переглядач
border-spacing

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Приклад використання властивості

Встановлення відстані між границями сусідніх комірок

table { 


  border-collapse: separate; 


  border-spacing: 10px 50px; 


}

Додаткові посилання