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.

Answer 2

The w3schools explanation for display:block is as fallow

The element is displayed as a block-level element (like paragraphs and headers) and you can check the display behavior here

practically mostly we use display:block in four situations

1. Element doesn't contains any content, but need to show as fix size block. eg: link with background image but no text between open and close anchor tags.
2. Element need to show in fix size ignore the auto size according to content.
3. There are set of elements and each should display in each line (one element per line).
4. To implement show hide we can use diaply:none and display:block

But link functionality doesn't have any relationship with the display or CSS, link showld work interdependently, CSS wrote for the anchor tag, just for style the link.

here is some more details about display https://developer.mozilla.org/en-US/docs/Web/CSS/display