The designation "A" "IMG" looks incorrect. (32 * 32px shown as 38 * 21px)
Below are my 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 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:
Firefox has the same problem. I think this is browser independent. How can I fix this gracefully?
source to share
These two styles make the blocks correct:
a{
display:inline-block;
}
img{
display:block;
}
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.
Screenshots displayed in Firefox:
source to share