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:
- Make sure list items don’t have padding, but links do
- 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.
It’s posts like these that show me just how much I have left to learn about CSS.
Thanks! :)
Same here! Simple stuff, but very helpful. Great post for a newcomer like myself.
It’s only obvious if you live and breathe this stuff. For the rest of us, it’s flippin’ brilliant.
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.
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 :)
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.
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.
and there I learn something again!!
All Hail the master :)
There will be problem if you want one of list items (referenced to current page) to be selected, so it will not contain a link. In this case, you can insert span instead of link, or specify paddings for li.selected.
Yep, that’s a classic concern. Another solution might be just using an <a> tag without an href attribute. Or include the href anyway, or include the href but use pointer events (https://css-tricks.com/pointer-events-current-nav/)
Now that’s unbelievably useful. I was never aware of the
“pointer-events: none;”
property. Totally learned something new thing. With regard to your current post, good stuff :)
I actually like a little gap between my links sometimes, but that’s just my opinion..
This is a great suggestion, I too never knew about the pointer event thing, strange i had never seen that post of yours before because I read your blog daily. with regards to this current post, I don’t believe having a space between links is a huge problem, unless of course its ALOT of space in the nav bar, but having gaps between the clickable areas of links I think is sometimes better than having the whole area clickable
If it is obvious that the list item references the current page, I really don’t see a problem in keeping the <a> tag, complete with href in the list.
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.
Thanks, fixed that.
Something I always have trouble remembering!
It’s like trying to re-invent the wheel; maybe I’ll stick this on the wall.
Heheee.
Very good.
Sometimes I had problems with links within the lists.
Resolved. Thanks Chris.
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.
You do a great job of recognizing importance in the simplest things. Attention to detail!!!
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!
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 :-) )
This is one of those simple things that is easy to overlook, thanks for posting… great tip.
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.
(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.
Excellent starter’s guideline.
Simple yet powerful…
Ya this is a good practise..I agree…setting padding to “a” was something new me..thanks.
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.
Thanks again Chris, great (:
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.
I don’t think a search engine really cares how you style the link.
I thought this was obvious right here, very shocking to see that it’s not =/.
Classic Solution for classic problem.. Thanks for tip
Thanks for the tip. Your visuals help me understand (and remember) the concept a lot better than reading text out of a book.
Been using this for a while, but it’s good to see it written down!
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.
You’re a mad genius! … this is a great post.
Great advice. This is one to remember… :)
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.
Oh my god, what a waste of time… If this is new to you, you really should start at CSS tutorial part 1.
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!
This is what its all about! More basic stuff for us newbs. :)
This is the best kind of article to learn: practical, short and simple! :D
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.
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.
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.
thx for this article, i was looking for a way to fix this! great!
Great. Very simple post yet very useful.
off topic ; -)
The new design of site is very nice!
Great Design Chris.
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.
Yes! I have been wondering how to do this. Thanks!
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.
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!
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).
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?
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. =)