HTML and CSS Tips

Increase the clickable area of interactive elements

A link (<a> tag) normally looks and behaves like this: the clickable area is the link text, or any child element you may have inside the <a>.

However, there are a lot of situations where we want the whole parent element to be clickable, like in a typical nav: your list items are styled to look like buttons, so they should behave like buttons too. You've probably encountered websites with buttons that wouldn't do anything unless you clicked the text inside the button - that's annoying, especially on mobile devices!

This is easy to fix with CSS. Here's a great guide covering a number of common scenarios.

For example, to fix this in a nav item:

nav li > a {
  display: block;
  padding: 1rem;
  /* or whatever padding value you want */
}

• Apply padding to the a inside a nav li
  • Padding, not margin - padding adds space inside an element, making it bigger. Margin adds space around it.
  • Apply padding to the a, not the li, because the a defines the clickable area.
• display: block; helps us two ways here:
  • It lets us add padding - an a is normally inline, and inline elements are unaffected by padding and margin.
  • Without this rule, our a is only as wide as its content. A block element defaults to the width of its parent, which makes the full width of the button clickable.

See the linked article for more examples.