CSS :: Свойство border-spacing

css-свойство border-spacing (от англ. border spacing – расстояние между границами) используется для установки расстояния между границами ячеек таблицы, когда значение свойства border-collapse установлено в separate.

Характеристики

Значение по умолчанию: 0.
Применяется: к элементу <table>, а также к элементам, у которых значение display установлено в table или inline-table.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.borderSpacing="value".

Синтаксис

border-spacing: <интервал> [<интервал>]

Значения

В качестве интервала принимаются любые единицы измерения (смотреть), используемые в CSS. При этом проценты использовать не разрешается.

Если используется одно значение интервала, то оно задает расстояние между границами ячеек как по горизонтали, так и по вертикали. Также разрешается использовать через пробел два значения: первое будет задавать расстояние между границами ячеек по горизонтали, а второе - по вертикали.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/CSS2/tables.html#separated-borders

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/border-spacing

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		table{
		width: 50%;
		margin-top: 3em;
		border: 1px solid green;
		border-collapse: separate;
		}
		
		td{
		border: 1px solid green;
		}

		.spacing_1{
		border-spacing: 5px;
		}
		
		.spacing_2{
		border-spacing: 0.8em;
		}
		
	</style>
	
</head>
<body>
	
	<table class="spacing_1">
		<caption>Интервал между границами 5px</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
	</table>	
	
	
	<table class="spacing_2">
		<caption>Интервал между границами 0.8em</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
	</table>
		
</body>
</html>

Пример №1