Question

Take a look at this fiddle.

Quick info:

• The div is 500px wide
• The image inside it is centered with css (margin: 0 auto)
• The image has an anchor tag wrapper around it (no css)

Problem:
If you inspect the anchor tag (firebug or other inspector), it shows as the same width and height as the image, which to me is correct, BUT the full div is clickable.

Questions:

• Is firebug showing the wrong size of the anchor tag?
• Are the browsers wrong? (I assume not)
• What’s going on? 🙂

Answer 1

I suspect it’s because the <img> is styled with display:block. That means that the <img> element (!) (as opposed to the graphic image itself) will expand to fill whatever width is allocated to it. Note that when you remove display:block setting, the clickable area falls back to the expanse of the image, as expected.

The question then becomes: How do you center the linked image while limiting the clickable area to the image? One way is:

div { width: 500px; text-align:center; }