Link Padding

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:

Link Padding on Hyperlinks

[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.

Link Padding Increases the Active Area

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:

1. Display it as block
2. Increase the size around it thru padding

[css]
a {
display: block;
padding: 1rem;
}
[/css]

Don’t Overdo It!

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.