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;

  1. a img {
  2. position: relative;
  3. top: 5px;
  4. margin-top: -5px;
  5. border: 0;
  6. }
  7. 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.

Back to top

Filed under HTML and CSS

Comments:

  1. 01 March 2010 (02:44 AM) by cheap uggs

    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!

  2. 14 May 2010 (10:09 AM) by mbt shoes

    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.

  3. 19 May 2010 (06:06 AM) by ed hardy

    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!

  4. 19 May 2010 (06:07 AM) by mbt shoes

    what you provide is very good,i like it so much ,thank you ,the article you write is perfect!

  5. 05 October 2010 (07:14 PM) by casino online

    GREAT....NICE.....>ONE.....>LIKE....>>IT..........

Sorry, due to spam, comments are temporarily out of order.

Back to top

Preferences

These settings will be saved for your convenience.