border-spacing
Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse .
Синтаксис
border-spacing: значение1 [значение2]
Значения
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.
HTML5 CSS 2.1 IE Cr Op Sa Fx
border-spacing 1 2 3 4
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-spacing
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;
Значения свойства
- Если указано только одно значение, оно определяет расстояние, как по вертикали так и по горизонтали.
- Если указано два значения, первое устанавливает расстояние по горизонтали, второе по вертикале.
border — spacing
Свойство для управления расстоянием между рамками ячеек таблицы.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 8 ноября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство border — spacing задаёт отступ между рамками ячеек таблицы.
Пример
Скопировать ссылку «Пример» Скопировано
table border-spacing: 10px;>table border-spacing: 10px; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Разрешается указывать одно или два неотрицательных значения:
- border — spacing : 1px — расстояние между ячейками со всех сторон одинаковое.
- border — spacing : 1px 2px — первое значение задаёт расстояние между ячейками по горизонтали, второе — по вертикали.
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство border — spacing задаёт расстояние между ячейками таблицы. Это свойство работает только для таблиц со свойством border — collapse в значении separate .
Отступ также будет появляться вокруг таблицы, поэтому расстояние между ячейками таблицы и её рамкой будет складываться из значений border — spacing и padding таблицы.
Как установить расстояние между ячеек?
Расстояние между ячеек заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне веб-страницы. Для управления расстоянием между ячеек используется стилевое свойство border-spacing. Если задано единственное значение, то оно устанавливает расстоянием между соседними ячейками. Если задать два значения, то первое определяет расстояние по горизонтали (т. е. слева и справа от ячейки), а второе — по вертикали (сверху и снизу).
В примере 1 показано добавление свойства border-spacing к селектору table .
Пример 1. Использование border-spacing
| Леонардо | 5 | 8 |
| Рафаэль | 4 | 11 |
| Микеланджело | 24 | 9 |
| Донателло | 2 | 13 |
Результат данного примера показан на рис. 1.
Рис. 1. Вид таблицы при использовании border-spacing
При добавлении к селектору table свойства border-collapse со значением collapse , значение border-spacing игнорируется, вид самой таблицы меняется (рис. 2).
Рис. 2. Вид таблицы при использовании border-collapse с collapse
См. также
- border-collapse
- border-spacing
- Оформление таблиц