Свойство outline-offset - это настоящий маст-хэв для тех, кто хочет добавить «воздуха» вокруг контура элемента. Оно позволяет сдвинуть внешнюю границу на заданное расстояние от края блока, создавая эффект отступа без изменения внутренней структуры. Почему стоит обратить внимание именно на этот параметр? Потому что внешняя граница (outline) обладает уникальными свойствами, которые выгодно отличают её от обычной рамки (border): - Она абсолютно не влияет на ширину и высоту самого элемента - это очень удобно при верстке!
- Форма внешней границы может быть нестандартной, не обязательно строго прямоугольной.
| Значение по умолчанию: | 0 | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.outlineOffset="15px" | Разберёмся с доступными значениями, чтобы вы могли гибко настраивать отступы под свои задачи: | Значение | Описание | | расстояние | Задает величину отступа внешней границы от элемента. | | inherit | Указывает, что значение наследуется от родительского элемента. | Пример html head style type="text/css" div { margin: 20px; width: 180px; padding: 10px; height: 70px; border: 2px solid black; outline: 2px solid red; outline-offset: 15px; } /style /head body divСвойство outline-offset задает расстояние между внешней границей и краем элемента в 15px./div /body /html
|