CODEWITHSUNDEEP
htmlcssbrowserrendering
Frexuz
Frexuz

Reputation: 4943

Understanding a browser rendering "quirk"

Take a look at this fiddle.

Quick info:

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:

Upvotes: 2

Views: 137

Answers (2)

David Weinraub
David Weinraub

Reputation: 14184

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; }

Upvotes: 2

Jeff Lauder
Jeff Lauder

Reputation: 1247

The anchor tag as around the image. The image has a margin. auto isn't 0 here, it's the difference between 500 and the width of the image / 2.

If you would like to not include the margin, wrap the image and anchor in a div, then position that with margin:0 auto;

Upvotes: 0

Related Questions