15 октября 2020 г.

Свойство outline

Свойство 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 и других аналогичных, когда нужно выделить элемент, но чтобы ничего при этом не прыгало.

Карта учебника

Комментарии вернулись :)

перед тем как писать…
  • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.