outline-offset

Baseline Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с апреля 2017 года.

Свойство outline-offset CSS задаёт величину отступа между рамкой и краем или границей элемента.

Попробовать

Синтаксис

/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;

/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;

Значения

<length>: Ширина отступа между элементом и его рамкой. Отрицательное значение помещает рамку внутрь элемента. Значение 0 помещает рамку так, что между ней и элементом нет отступа.

Описание

Рамка — это линия, нарисованная вокруг элемента, снаружи границы. Пространство между элементом и его рамкой прозрачно. Другими словами, оно такое же, как фоновый цвет родительского элемента.

Формальное определение

Начальное значение	`0`
Применимо к	всем элементам
Наследуется	нет
Вычисленное значение	как указано, но относительные единицы измерения преобразуются в абсолютные
Тип анимации	длина

Формальный синтаксис

outline-offset = 
  <length>

Примеры

Указание отступа рамки в пикселях

HTML

<p>Gallia est omnis divisa in partes tres.</p>

CSS

p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}

Результат

Спецификации

Спецификация
CSS Basic User Interface Module Level 4 # outline-offset

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`outline-offset`	1	15	1.5 До Firefox 88 рамка не следила за формой `border-radius`.	9.5	1.2	18	4 До Firefox 88 рамка не следила за формой `border-radius`.	14	1	1.0	37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset