Remove Border from Image Links

For illustrating anchor links in some cases you might want to use bottom-border instead of a default text-decoration:underline. In order to achieve that, one would use the following CSS rule:

a { text-decoration:none; border-bottom:2px solid; }

which also adds border to the bottom of all linked images. In order to remove it, you would think that setting

a img { border:none; }

would be enough. However, the truth is that it removes only the border around the image and not the one from the anchor that surrounds it:

Luckily, if the image is higher than the line-height of the text, we can hide the bottom border of the image by setting:

a img { border:none; vertical-align:top; }

and you’re done.

Why this works?

By default both anchors and images are inline elements and by applying vertical-align:top; to an image inside an anchor, we move the anchor to the top of the image. For some reason images have higher z-index than anchors.