CSS Trick: Remove borders from linked images

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;
}

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.