html - “A” tag wrapping “IMG” seems incorrect size. (32 * 32px is shown as 38 * 21px) -


the following issued codes (http://jsfiddle.net/dz754deg/1/).

a{    text-decoration: none;  }
<a href="#">    <img src="http://lorempixel.com/32/32/"/>  </a>  <a href="#">    <img src="http://lorempixel.com/32/32/"/>  </a>

the result isn’t strange seemingly. if check browser’s built-in developer tools, a tag has incorrect size. in chrome (latest version), img tag normal (32 * 32px). a tag odd (38 * 21px or 32 * 21px).

this image might help:

you can see element has inconsistent size

firefox has same issue. think isn’t browser-specific. how can fix gracefully?

these 2 styles make blocks appear correctly:

a{     display:inline-block; } img{     display:block; } 

it’s because of how inline , block level elements rendered. can still click on inline link wrapped around image everywhere image looks if couldn’t.

jsfiddle demo

screenshots rendered in firefox:

img elementa element


Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -