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.
Thank you, exactly what I was looking for!
Holy shit man! I was looking for this for almost 2 hours… finally found this trick that made the thingy work!
Thanks for sharing,
Leniel
Wow. This is an awesome technique. Worked like a charm. Do you know if there is cross-browser support for this technique?
Thanks.
Jonathan, this trick should work across all browsers.
Thanks a lot Kaspers. I appreciate the response.
Thank you! So easily! Before i find lesson where need just add new class for image, but add for all images this hard! That idea is great!