CSS linked images are being underlined ("a" display is set to block) CSS linked images are being underlined ("a" display is set to block) google-chrome google-chrome

CSS linked images are being underlined ("a" display is set to block)


Images are inline elements, so they are treated as part of the text. It's not the image that is underlined, it's the text that contains the image that is underlined, so it doesn't help to prevent underlining for the image.

You can turn the images into block elements by floating them, then they are not part of the text:

a > img {    float: left;    border: none;    padding-right: 5px;    width: 1.8em;    height: 1.8em;}


I think your best option is to get rid of the underline text-decoration property for the a element, put the link text in a span with common class, and apply text-decoration: underline to that class.


I was running in the same doubt. The text-decoration set to none works for me:

<a href="..." style="text-decoration:none;">    <img src="..."></a>

As was said befor, you can use a class to make this more generic.

Nice question by the way, It looks totally strange in my website when I saw some minus at the bottom of images. Then I realize that was an underlying.