Свойство CSS border-spacing
Свойство CSS border-spacing задаёт расстояние между границами соседних ячеек таблицы. Это свойство применяется только в том случае, если для border-collapse установлено значение separate. Если используется модель объединённых границ, это свойство будет проигнорировано.
Свойство border-spacing применяется к HTML-элементам, использующим модель разделённых границ. Оно определяет расстояние между ячейками, поскольку отдельные границы ячеек таблицы, отрисованные с использованием модели разделённых границ, не объединяются.
Значение border-spacing можно задать с помощью одного или двух значений длины. Если указаны два значения, первое задаёт горизонтальное расстояние, а второе — вертикальное. Если указано только одно значение, оно применяется как для горизонтального, так и для вертикального расстояния. Отрицательные значения не допускаются.
| Начальное значение | 0 |
|---|---|
| Применяется к | Элементам table и inline-table. |
| Наследуется | Нет |
| Анимация | Да. Значение расстояния анимируется. |
| Версия | CSS2 |
| Синтаксис DOM | object.style.borderSpacing = "10px"; |
Синтаксис
Синтаксис свойства CSS border-spacing
border-spacing: length | initial | inherit;Пример свойства border-spacing с одним значением:
Пример свойства CSS border-spacing с одним значением
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
.table {
border-collapse: separate;
border-spacing: 20px;
}
</style>
</head>
<body>
<h2>Example of border-spacing: 20px;</h2>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Mary</td>
<td>Peterson</td>
</tr>
<tr>
<td>Maxim</td>
<td>Brown</td>
</tr>
</table>
</body>
</html>Результат
Ниже приведён ещё один пример с двумя значениями. Первое значение задаёт горизонтальное расстояние, а второе — вертикальное.
Пример свойства border-spacing с двумя значениями:
Пример свойства CSS border-spacing с двумя значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-spacing: 20px 30px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Теперь добавим стилизацию к примеру таблицы выше. Например, добавим свойство background-color, которое задаёт цвет фона элемента.
Пример использования свойства border-spacing вместе с background-color:
Пример свойства CSS border-spacing вместе с background-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
.table {
border-collapse: separate;
border-spacing: 20px;
background-color: #eee;
}
</style>
</head>
<body>
<h1>Example of border-spacing: 20px;</h1>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Mary</td>
<td>Peterson</td>
</tr>
<tr>
<td>Maxim</td>
<td>Brown</td>
</tr>
</table>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| length | Задаёт расстояние между ячейками в px, em и т. д. | Запустить » |
| initial | Устанавливает свойству его значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какова функция свойства 'border-spacing' в CSS?