The designation "A" "IMG" looks incorrect. (32 * 32px shown as 38 * 21px)

Below are my codes ( ).

  text-decoration: none;

<a href="#">
  <img src=""/>
<a href="#">
  <img src=""/>

Run codeHide result

The result does not look strange. But if I check it with the built-in browser development tools, the tag a

is the wrong size. In Chrome (latest version) the tag img

is normal (32 * 32px). But the tag is a

odd (38 * 21px or 32 * 21px).

This image might help:

You can see that the A element has an inconsistent size

Firefox has the same problem. I think this is browser independent. How can I fix this gracefully?


source to share

1 answer

These two styles make the blocks correct:



This is because of how the level elements inline

and block

. You can still click the link inline

that is wrapped around the image wherever the image is, but it just looks like you couldn't.

JSFiddle Demo

Screenshots displayed in Firefox:

IMG elementA element



All Articles