CSS :: Свойство outline-offset

css-свойство outline-offset (от англ. outline offset – смещение контура) используется для установки смещения контура элемента относительно его границ, тем самым задавая интервал между ними.

Следует помнить, что в отличие от границ элемента, контур не влияет на размеры и положение самого элемента, а также окружающих элементов, отображаясь поверх них.

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

Значение по умолчанию: 0.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.outlineOffset="value".

Синтаксис

outline-offset: <интервал>

Значения

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-ui-3/#outline-offset

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

Примеры

HTML Результат

htmlCodes

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

	<style>
		
		/* Граница - фиолетовая, контур - оранжевый */
		p{
		width: 300px;
		height: 150px;
		margin: 5em;
		padding: 1em;
		border: 5px solid violet;
		outline: groove 8px orange;
		}
		
		.p_1{
		outline-offset: 1em;
		}
		
		.p_2{
		outline-offset: -30px;
		}
		
	</style>
	
</head>
<body>
	 
	<p class="p_1">
		Контур отображается снаружи.<br> 
		outline-offset: 1em;
	</p> 
 
	<p class="p_2">
		Контур отображается внутри.<br> 
		outline-offset: -30px;
	</p>
 	
</body>
</html>

Пример №1