CSS Trick: Remove borders from linked images
Posted on 18 August 2009 (10:42 PM)
Here's a nice little CSS trick I cooked up today when talking to @heliumworkx.
You know how you sometimes use border-bottom to style links? Then you must be familiar with situations where there's an image inside a link on which the border looks really stupid. Unfortunately there's no CSS selector that targets links containing an img element, so a sprinkle of magic is needed in order to hide the border.
It's a tiny sprinkle, really. Lookit;
a img {position: relative;top: 5px;margin-top: -5px;border: 0;}- Download this code: /code/css-trick-remove-borders-from-linked-images1.txt
That's it! First of all, the border: 0; line removes the border browsers put on linked images by default. The real trick is in the positioning.
By pushing the image down 5 pixels, using the position and top properties, the image effectively masks the parent link's border.
However, this also means your image is placed 5 pixels below anything that it would usually be neatly aligned with. That's where margin-top comes in. The negative value of -5px pulls the image and the containing links 5 pixels up again, putting it back in its original place.
Easy, eh? Check the example here if you wish to see some real source code.
Filed under HTML and CSS
- ← previous article: Testing IE6 on Mac using VirtualBox
Comments:
Your writing is very elegant, very vivid and lively, I really like you, wish you continued to write better articles, I will often try to concern, oh!
Great post! I am just starting out in community management/marketing media and trying to learn how to do it well - resources like this article are incredibly helpful.
Thanks a lot for enjoying this beauty article with me. I am apreciating it very much! Looking forward to another great article. Good luck to the author! all the best!
what you provide is very good,i like it so much ,thank you ,the article you write is perfect!