Свойство outline
задаёт дополнительную рамку вокруг элемента, за пределами его CSS-блока. Поддерживается во всех браузерах, IE8+.
Для примера, рассмотрим его вместе с обычной рамкой border
:
<div style="border:3px solid blue; outline: 3px solid red">
Элемент
</div>
- В отличие от
border
, рамкаoutline
не участвует в блочной модели CSS. Она не занимает места и не меняет размер элемента. Поэтому его используют, когда хотят добавить рамку без изменения других CSS-параметров. - Также, в отличие от
border
, рамкуoutline
можно задать только со всех сторон: свойствoutline-top
,outline-left
не существует.
Так как outline
находится за границами элемента – outline
-рамки соседей могут перекрывать друг друга:
<div style="outline: 3px solid green">
Элемент
</div>
<div style="outline: 3px solid red">
Элемент
</div>
В примере выше верхняя рамка нижнего элемента находится на территории верхнего и наоборот.
Все современные браузеры также поддерживают свойство outline-offset
, задающее отступ outline
от внешней границы элемента:
<div style="border:3px solid blue; outline: 3px solid red; outline-offset:5px">
Расстояние между рамками будет 5px
</div>
Ещё раз заметим, что основная особенность outline
– в том, что при наличии outline-offset
или без него – он не занимает места в блоке.
Поэтому его часто используют для стилей :hover
и других аналогичных, когда нужно выделить элемент, но чтобы ничего при этом не прыгало.
Комментарии вернулись :)
<code>
, для нескольких строк кода — тег<pre>
, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)