Свойство CSS border-spacing
Это свойство CSS используется для установки расстояния между границами соседних ячеек в таблице. Это применимо только в том случае, если для свойства border-collapse установлено значение separate. Между границами не будет пробела, если для свойства border-collapseзадано значение Collapse .
Его можно определить как одно или два значения для определения интервала по вертикали и горизонтали.
◦ Когда указано только одно значение, оно задает интервалы как по горизонтали, так и по вертикали.
◦ Когда мы используем синтаксис с двумя значениями, то первое значение используется для установки интервала по горизонтали (т. е. расстояния между соседними столбцами), а второе значение задает интервал по вертикали (т. е. расстояние между соседними строками).
Синтаксис
border-spacing: length | initial | inherit;
Значения свойств
Значения этого свойства CSSопределяются следующим образом.
length:
это значение задает расстояние между границами соседних ячеек таблицы в px, cm, pt и т. д. Отрицательные значения не допускаются.
initial:
устанавливает для свойства значение по умолчанию.
inherit:
он наследует свойство от своего родительского элемента.
Давайте разберемся с этим свойством CSS на нескольких примерах. В первом примере мы используем одно значение свойства border-spacing , а во втором — два значения свойства border-spacing .
Пример
Здесь мы используем единственное значение свойства border-spacing. Для свойства border-collapse установлено значение separate, а для свойства border-spacing установлено значение 45px.
<html>
<head>
<style>
table {
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th {
border: 5px solid red;
background-color: yellow;
}
td {
border: 5px solid violet;
background-color: cyan;
}
#space {
border-collapse: separate;
border-spacing: 45px;
}
</style>
</head>
<body>
<h1>Свойство border-spacing</h1>
<h2>border-spacing: 45px;</h2>
<table id="space">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>должнасть</th>
<th>возраст</th>
</tr>
<tr>
<td>Стивен</td>
<td>Кинг</td>
<td>Писатель</td>
<td>74</td>
</tr>
<tr>
<td>Анджелина</td>
<td>Джоли</td>
<td>Актриса</td>
<td>46</td>
</tr>
<tr>
<td>Кристина</td>
<td>Свечинская</td>
<td>Хаккер</td>
<td>33</td>
</tr>
</table>
</body>
</html>
Здесь мы используем два значения свойства border-spacing. Для свойства border-collapse задано значение separate, а для свойства border-spacing установлено значение 20pt 1em. Первое значение, то есть 20pt, задает интервал по горизонтали, а значение 1em задает интервал по вертикали.
<html>
<head>
<style>
table {
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th {
border: 5px solid red;
background-color: yellow;
}
td {
border: 5px solid violet;
background-color: cyan;
}
#space {
border-collapse: separate;
border-spacing: 20pt 1em;
}
</style>
</head>
<body>
<h1>Свойство border-spacing</h1>
<h2>border-spacing: 20pt 1em;</h2>
<table id="space">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>должнасть</th>
<th>возраст</th>
</tr>
<tr>
<td>Стивен</td>
<td>Кинг</td>
<td>Писатель</td>
<td>74</td>
</tr>
<tr>
<td>Анджелина</td>
<td>Джоли</td>
<td>Актриса</td>
<td>46</td>
</tr>
<tr>
<td>Кристина</td>
<td>Свечинская</td>
<td>Хаккер</td>
<td>33</td>
</tr>
</table>
</body>
</html>
