CODEWITHSUNDEEP
htmlcss
Mia
Mia

Reputation: 6531

Hyperlink images create a weird margin

As I was trying to theme my website, I've discovered some weird behavior when images are used with hyperlinks. Here is a sample code:

<div id="maindiv">   <a href="google.com">
     <img src="https://lh4.ggpht.com/AlYHsHF4I5Y0Hx-64ObsbQsJVgbVIu-GK6cJwn1PHeeH0aIlEv1vtizf7whwfB8kuA=w16">
</a> </div>

You can also preview it here: http://cssdeck.com/labs/vzine2bc

As you can see, there is a weird margin at the image, the containing div is not exactly covering it eventhough there is nothing that creates the margin. Is this a <a href> behavior or am I missing a point?

Upvotes: 0

Views: 126

Answers (3)

Daniel Riemer
Daniel Riemer

Reputation: 1021

img { display: block; } or img { display: inline-block; } should fix it.

See fiddle here: http://jsfiddle.net/zitrusfrisch/7vh8Y/

EDIT:

As @Zettam mentioned in the comments img { display: inline-block; } does not solve the problem. So if img { display: block; } is not an option because you want them to display inline, try these alternatives:

  1. Let the image float: left; but do not forget to clear the floating in some way, e.g. setting the wrapping element to overflow: hidden; (http://jsfiddle.net/zitrusfrisch/7vh8Y/1/)
  2. font-size: 0px; on the wrapping element (http://jsfiddle.net/zitrusfrisch/7vh8Y/2/)
  3. img { vertical-align: middle; } works as well, as long as the font-size is not bigger than the image (http://jsfiddle.net/zitrusfrisch/7vh8Y/3/)

Upvotes: 1

Jardo
Jardo

Reputation: 2093

Some browsers put a border around images that are inside hyperlinks. You can avoid this by specifying the border with css: border-style: none

Upvotes: 0

azz
azz

Reputation: 5930

Try this:

a img { border: 0; }

Upvotes: 0

Related Questions