Keep Margins Out of Link Lists

Avatar of Chris Coyier
Chris Coyier on (Updated on )

When building a menu or other list of links, it’s generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier for people to click and lead to better user experience.

Let’s look at a simple list of links like this:

<ul>
   <li><a href="#">This little</a></li>
   <li><a href="#">piggy went to</a></li>
   <li><a href="#">market</a></li>
</ul>

Without any CSS, the list items will be block level and the anchor links will be inline. So our link targets are only the size of the text itself.

We can do better by making sure the links that are in the list are block level, so they are as wide as their list item parents.

ul a { display: block; }

We can do even better by:

  1. Make sure list items don’t have padding, but links do
  2. No margins in use, so there are no un-clickable gaps
ul li { padding: 0; margin: 0; }
ul a { padding: 5px; display: block; }

Today’s post is brought to you by the fairly-obvious-foundation, the yeah-but-I-see-it-all-the-time corporation, and the pet-peeve cooperative.