css - Why do you put a display:block on an "a" tag that is inside a list?

Question

I am trying to understand image sprites on CSS, and one line of code looks like this.

#navlist li, #navlist a{height:44px;display:block;}

I am just wondering what effect does display:block has on "a", I know that it is for the "a" tag since the link won't work if I removed "a" and conversely if I removed "display:block", I'm just wondering why it should be "display:block".

Answer 1

To make the inline element (a, span etc) to behave like a box model element (div, p, h1 etc), in other words, to make the a tag behave like a div tag.

Inline elements can live side by side on the same line, for example if you write

<a href="example.com">Link1</a> <a href="example.com">Link2</a>

they will appear like Link1 Link2 but box model elements can't live in the same line, for example, if you write something like

<div>Box1</div><div>Box2</div>

they will appear like

Box1
Box2

Both divs will occupy the whole space around them (even if they are smaller in width). In a list, for example,

<li><a href="">Home</a></li>

If the list width is 300px then the a tag will not cover the full width of the li's width because by default the a tag is inline and using display:block will make the a element to occupy the full width of the li, even if it's not that wide.

There are more to say about this, I've just gave you an example, you should read more. Check this link and also Check this example.