outline-offset: отступ контура фокуса
Свойство outline-offset отодвигает контур outline от края элемента или переносит его внутрь при отрицательном значении. Контур удобно использовать для видимого состояния клавиатурного фокуса.
Назначение
Свойство outline-offset отодвигает контур outline от края элемента или переносит его внутрь при отрицательном значении. Контур удобно использовать для видимого состояния клавиатурного фокуса.
Как это работает
Outline не резервирует место в раскладке. Поэтому добавление контура и изменение его отступа не должны сдвигать соседние кнопки, в отличие от изменения ширины обычной рамки.
Пример
<style>.actions{display:flex;gap:1rem;padding:1rem}.actions button{padding:.6rem 1rem}.actions button:focus-visible{outline:3px solid #176b50;outline-offset:4px}</style>
<div class="actions"><button type="button">Сохранить</button><button type="button">Отмена</button></div>Что должно получиться
При переходе Tab вокруг активной кнопки появляется отделённый от неё контур. Кнопки не прыгают по горизонтали. Они демонстрационные и не сохраняют данные.
Граница применения и частая ошибка
Контур может обрезаться предком с overflow:hidden или перекрываться соседним элементом. Отрицательный отступ способен наложить линию на текст. Не удаляйте стандартный outline без проверенной замены для каждого состояния.
Самостоятельная проверка
Поставьте кнопку вплотную к краю узкого контейнера и проверьте контур. Затем увеличьте расстояние между кнопками и сравните положительный и отрицательный отступ при масштабе 200%.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.