Block Links

Introduction

If you look at the menu on this site you'll notice that even the blank space to the right of the text works for the links.

This is incredibly easy to achieve, and really helps in using the menu, but there are a surprising number of sites that don't do it; the worst kind are the ones that highlight the "cell" even if you're not pointing at the actual link.

Guide

Firstly an example of the problem I'm going to solve...

For the purposes of the example, let's say the box below is part of a navigation menu.

Here's the CSS:

div {width: 200px; border: 1px solid #000; padding: 5px;}
a {text-decoration: none; color: #000;}
a:hover {color: #fff; background-color: #000;}

It looks quite nice (remembering that this isn't a style guide as such); it has some padding so the border isn't too close to the text, and the colours have a good contrast.

However, most of the "cell" is dead-space - it's not part of the link - as you'll see if you move your mouse over it.

This is ridiculously easy to solve:

Here's the CSS:

div {width: 200px; border: 1px solid #000;}
a {text-decoration: none; color: #000; padding: 5px; display: block; height: 100%;}
a:hover {color: #fff; background-color: #000;}

The important parts are in bold red; notice that the padding is now on the A tag and display: block; has been added. The height: 100%; is because IE is awkward and needs a height specifying; as you can see, it doesn't affect the appearance.

The size of the box should still be the same - the value of the padding hasn't changed - but now the entire "cell" will work as the link.

Summary

Moving the padding from the DIV to A means that the distance between text and border will still be the same, but the background of A will extend to the edge of the DIV.

Telling the browser to display A as a block means that the "box" of the link will be expanded to fill the available space; in this case, the area of the bordered box.

You need to give a height for the links (even if it's just "100%") to keep Internet Explorer happy.

Obviously you're free to use whatever colours and sizes you want, and you don't need to use a DIV (it would be best to use a list anyway...), but the important part is putting any padding on the links and not the boxes they're in, and to add display: block to the links' CSS.