Sorry about that, not exactly sure what I was I thought I read
a, by default inherits a display: inline; attribute, which wraps the container of the text (see visual model and box models
). By setting display: block, you give it block level attributes, and can therefore allow the entire li box to be clickable.
Span elements also inherit display: inline;.
I recently finished a site where we used this for our navigation.
The main navigation is a list. In order for the entire background-image to display on the link, it had to have display block, otherwise part of the background-image would be hidden. It is the same concept as what you are describing.