Grow your CSS skills. Land your dream job.

Keep Margins Out of Link Lists

Published by Chris Coyier

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.

Comments

  1. WC
    Permalink to comment#

    It’s posts like these that show me just how much I have left to learn about CSS.

    Thanks! :)

  2. Permalink to comment#

    It’s only obvious if you live and breathe this stuff. For the rest of us, it’s flippin’ brilliant.

  3. As you say yourself, it’s obvious and shouldn’t have to be said but still… One see it all the time.

    Sometimes the simple things are easily overlooked so all in all, a short but informative post.

  4. shoutyman
    Permalink to comment#

    Can I dissent slightly? I agree that bigger click areas are better (IME the usual worst offenders – by quite some, er, margin – are pagination links) but I often find that grabbing excessive horizontal space for items in horizontal lists can be problematic: you can end up with big chunks of whitespace which are quite unexpectedly clickable. (This depends somewhat on the presentation: strongly outlined lists with zebra-striped rows will be much less problematic than plain unconstrained blank space.)

    Imagine a list on a white page, with a dozen really short entries and one really long one, and then imagine all the links being the same length – if you’re wandering into the looks-dead-but-isn’t area then it’s a bit disorientating (and I don’t know about anyone else, but when resting my hand on the mouse I often find I click accidentally, so when reading I tend to instinctively settle the cursor over anything that looks like dead space, and if finding dead space is actually a challenge then it bugs me).

    So I agree with eliminating strips of unclickable space between the links, and adding some fixed margin either side of the text (effectively adding a ‘bleed’ to the link), I just think that if you must extend the link significantly beyond the text horizontally then at the very least the visual style needs to support that.

    So, personally, I would be inclined to adopt a similar style except for the “display: block” on the li elements, possibly with a bit more left/right padding to make up for it. IMO/IME/YMMV etc :)

    • Permalink to comment#

      I agree with what you say, but a quick solution is using some visible :hover effect, like changing the background so that you can see that it’s an active area.

    • TheDoc
      Permalink to comment#

      I agree with you to some extent, but I feel like this is specifically used for sidebars and navigation.

      If this were in the main body content, then yes, there is no way it should be a block element, inline would definitely be preferred.

  5. Aakash Goel
    Permalink to comment#

    and there I learn something again!!

    All Hail the master :)

  6. Permalink to comment#

    The fairly-obvious-foundation would also like to point out the typo in the last sentence buy => by.

    But a very useful tip, you see html tutorials on how to make lists and links but not much on pratical tips like this. I use it on all my links.

  7. jon
    Permalink to comment#

    Something I always have trouble remembering!
    It’s like trying to re-invent the wheel; maybe I’ll stick this on the wall.

  8. Heheee.
    Very good.
    Sometimes I had problems with links within the lists.
    Resolved. Thanks Chris.

  9. zmh
    Permalink to comment#

    Your disclaimer made me laugh.
    I love your short posts with small bits and pieces you write about as you find them / experience them /etcetera.
    They are a lot better than other blog’s pretty long posts I never end up reading.

  10. Permalink to comment#

    You do a great job of recognizing importance in the simplest things. Attention to detail!!!

  11. This is genius! At first I was thinking why is this not working for me… Then I reliased I removed the padding in my reset so this is always the case for my pages and I just never noticed it. Resets Rock!

    Thanks for sharing Chris!

  12. I’ve never understood why it seems no one does it like this. This is how I’ve defaulted my link lists for many years (once I found out about display:block :-) )

  13. Permalink to comment#

    This is one of those simple things that is easy to overlook, thanks for posting… great tip.

  14. Thanks. I add a bit more complex situation at http://www.chefsconsortium.com/ [left column "Upcoming Events" list] where there were multiple links with each . I needed up inserting around each link and assigning it with display:block. Improved look. Thanks for the heads up.

  15. diegocrusius
    Permalink to comment#

    (sorry for not being constructive today, but…) I love this site. I learn so much with it. It gives me so many ideas… I come as often as possible. Thanks.

  16. Excellent starter’s guideline.
    Simple yet powerful…

  17. Permalink to comment#

    Ya this is a good practise..I agree…setting padding to “a” was something new me..thanks.

  18. Good tip. An important takeaway here also is remember when styling ul/li/a lists always work from the inside out. So start by targeting the <a> with padding/block then go to the next.

  19. Thanks again Chris, great (:

  20. It’s my vague understanding that search engines frown upon large swaths of clickable white space. I think inline-block might be the better solution, which still allows for building in some extra padding for target size.

  21. I thought this was obvious right here, very shocking to see that it’s not =/.

  22. Permalink to comment#

    Classic Solution for classic problem.. Thanks for tip

  23. Thanks for the tip. Your visuals help me understand (and remember) the concept a lot better than reading text out of a book.

  24. Permalink to comment#

    Been using this for a while, but it’s good to see it written down!

  25. Anders
    Permalink to comment#

    In addition to this, I would like to stress the importance of styling distinct hover and focus states on the links, so that it becomes obvious to the user which one is being clicked. Especially in this case, where there’s no margin between the links.

  26. Permalink to comment#

    You’re a mad genius! … this is a great post.

  27. Permalink to comment#

    Great advice. This is one to remember… :)

  28. Great post, Chris, as always, but I fear that I must disagree slightly. I’m with you on enlargin the click area, but I often find myself intentionally adding the gap between the link elements in the navigation area.

    In my opinion, the gap (and the flickr this gap forces in the cursor when moving the mouse of the entire navigation) is another visual cue that seperates the elements from eahc other – and thereby seperates the actions being performed on click. The gap can, in my opinion, be a helpful UX pattern – as the wall between two doors may signify that they’re not for the same room.

    However, I have no research to support this theory :) And I’m quite aware that a significant hover effect my do the job (eliminating the need for a gap). But that’s my point entirely – that there might be a need for the gap.

  29. Donny
    Permalink to comment#

    Oh my god, what a waste of time… If this is new to you, you really should start at CSS tutorial part 1.

  30. I would say this is a great tip. The one comment I would make is that a very slight margin between the list items (vertically) can prevent you from accidentally clicking one of the adjacent links. Especially on touch devices, it can be very easy to “miss” the link slightly, and getting no response for a slight miss is better than hitting a different link and having to go back after a page load.

    Overall a great tip. Thanks!

  31. Martin
    Permalink to comment#

    This is what its all about! More basic stuff for us newbs. :)

  32. Permalink to comment#

    This is the best kind of article to learn: practical, short and simple! :D

  33. Instead of adding padding to the <a>, I usually do something like:

    li { height: 40px; }
    a { display: block; line-height: 40px; }

    which centers the text vertically without needing to add padding to the top and bottom.

    • Jörg
      Permalink to comment#

      I do that often, too. But this solution works only for a single line menu item. If the text in the link breaks, because of limited width, the space between the lines is too much.

  34. Good tip. Use this one just about every day.

    One thing that bothers me is when people use block anchors without purpose. If you’re changing the background color or other styles to make it appear more like a button or somesuch, that’s awesome.

    When people use display: block; on a regular old list, and the only thing that changes on the link is color or underline, I would rather use default list styling. Say you have an area 300px wide, but most links are only 50 or 100px. You hover over the right side of that 300px area, and the link gets underlined way over to the left because it’s a block element. Not a big deal by far, but it just looks and acts kind of weird to me.

  35. Permalink to comment#

    thx for this article, i was looking for a way to fix this! great!

  36. Permalink to comment#

    Great. Very simple post yet very useful.

  37. Permalink to comment#

    off topic ; -)
    The new design of site is very nice!

  38. ali
    Permalink to comment#

    Great Design Chris.

  39. Micah
    Permalink to comment#

    Now here is the bigger challenge. Making the <a> area LARGER than the containing so that you can hover navigation where the secondary nav is spaced several pixels away from the primary nav. I finally got it to work at http://www.printcopyfactory.com, but as for the logic of it all? I need to go stare at that CSS for a while.

  40. Permalink to comment#

    Yes! I have been wondering how to do this. Thanks!

  41. Hi Chris,

    I like your new design.

    If it helps, some of the avatars in the comments section are getting cut-ff on my browser.

    Screenshot: http://img225.imageshack.us/img225/6866/commentscsstricks.png

    I am using the latest version of Google Chrome & my screen resolution is 1024 by 768.

  42. Simple, but so true! This should one of the first things all web developers learn! There is noting more frustrating than a hard to hit link!

  43. Permalink to comment#

    Awesome. This definitely beats my old method.

    For those interested: My method was simply to wrap an < li < inside an < a < . This, of course, does not validate (and doesn’t work in some browsers).

  44. Permalink to comment#

    Simple but very usefulllll. One question, should we declare width and height to the single anchor link /*like read more link */ which has block level?

  45. downcasteyes
    Permalink to comment#

    I ran into this article when I was looking for a solution to an unordered list menu not displaying properly in IE7. This article provided some solutions but I noticed that it doesn’t really address HORIZONTAL menus. Maybe someday Chris will revisit this topic. Hint Hint. =)

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".