
👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
Link padding simply means adding padding to the HTML Anchor Element <a>.
It is important that we don’t leave the link as it is – we must make it large enough to be easily activated by any pointing device (mouse pointer or touch).
Let’s take a very simply example – a set of navigation items:
[codepen_embed height=”572″ theme_id=”1820″ slug_hash=”VYWaYE” default_tab=”result” user=”BrianSahagun”]See the Pen Link Padding by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
In Example 1, notice that the only active area of the links are the words themselves and not the whitespace beside them. You can see the active area by the blue background highlight when you hover on the links.
Now, compare Example 1 to Example 2. When navigating with a pointing device such as a mouse, it is easier in Example 2 to hover on the navigation items and click the chosen link; for navigating using touch, it is also easier in Example 2 since the active area is larger and you can tap far away from the other navigation items – avoiding an accidental activating of the other links.
To pad a link, there are two things to consider:
[css]
a {
display: block;
padding: 1rem;
}
[/css]
In Examples 1 and 2, you can see that the list has a fixed width and border that shows until where the navigation items end. Ensure that you clearly put active areas in a clear manner so that users won’t mistakenly click on a whitespace with a “hidden” link (see Example 3).
Now, why would users “click” or “touch” whitespace? I, personally, do that as a “comfort zone” knowing that activating on a whitespace releases any unknown focus on other elements – it’s similar to pressing Esc repeatedly.
—
Next post will be about padding action links – think icons in web app toolbar.