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

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

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

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

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

border-spacing: length|initial|inherit;

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

length

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
border-spacing	1.0	1.0	1.0	4.0	12.0	8.0

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<table>
    <tr><td>10px</td><td>по горизонталі</td></tr>
    <tr><td>50px</td><td>по вертикалі</td></tr>
</table>

table {
    border-collapse: separate;
    border-spacing: 10px 50px;
}

table, td {
    border: 1px solid #0172ad;
}

td { padding: 6px; }