When we’re styling :focus states, we often use the outline property to override the browser’s default styling.
This works well, but the outline can feel very close to the text that’s outlined. Right click or [tab] to the link in this Codepen to see:
To create more space, we could add padding on focused elements.
Alternatively, we could use outline-offset, a little-used property that creates some space between an element and its outline:
Browser support is very good except for IE and pre-2016 versions of Edge.
CSS For Designers is a practical guide to CSS, helping people bring their CSS knowledge up-to-date and learn how the language actually works.