I have a global rule for anchor tags in my document:
a,a:hover {border-bottom: 1px solid #ccc;}
But the border doesn't look good on images. I was curious if there's a way to remove the border of an anchor tag that contains an image only using pure css?
Adding border="0" to your img tag prevents that picture from having a border around the image. However, adding border="0" to every image would not only be time consuming but also increase the file size and download time. To prevent all images from having a border, create a CSS rule or file with the following code.
Anchor elements, as well as img and span elements are inline by default. If we wrap an image with an anchor element, the image becomes the anchor target. We can click the image anywhere and the link will work. If there is text as well, it too can be clicked.
An empty anchor is either a sign of a link with no anchor text (the entire landing page URL linked on the source URL) or an image link, which would have no anchor text. You can investigate any of your “empty anchor” backlinks by selecting the blue number of backlinks in the next column.
Approach: We can remove this default behavior by either defining our own border or by completely removing it using css. We can select specific images using a css class or id, to select all hyperlinked images we will use the parent-child css selector.
I found this: http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/
It basically is a very simple hack that looks like this:
a img { border:none; vertical-align:top; }
It works like a charm and has no browser-conflicts: See article for more details.
EDIT: The border:none
doesn't actually do anything useful in most circumstances. The border is on the anchor, not the img tag, so if you've already zeroed out the border on anchored images with a global CSS reset, you'll only need vertical-align:top
to push the a
's border up and behind the image so it's no longer visible (as long as your image is opaque).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With