13

Hi i am creating a website while placing brand logo inside link tag at top right of web page i encountered this problem

       <a href="#" >
          <img src='img.png'>

       </a>

       img {
           height: 50px;
           width: 50px;
         }

The result is a tag the wrapping image height is actually more than 50px even though there is no text in a tag . But when i give font-size:0 it Works .

So I need the reason what causes the link tag to take more height.

Please help me understand this concepts rather than just with some css codes

I have sample its . please help me with this .

http://jsfiddle.net/amerrnath/TLBEx/

Ok Sorry i got the answer from the link .

White space at bottom of anchor tag

Thank you

Community
  • 1
  • 1
Amerrnath
  • 2,227
  • 4
  • 22
  • 33

1 Answers1

17

Change the imgs display to block 

a {
    display:inline-block;
}
a img {
    display:block;
}

See this jsfiddle

So what does it do? The image inside the link has a default display of inline-block. The a you set to display:inline-block. It's the combination of the two in combination with whitespace inside the a element, that does the problem.

You can simulate with two nested inline-block divs which has the dimensions set only on the inner one. http://jsfiddle.net/TLBEx/4/

yunzen
  • 32,854
  • 11
  • 73
  • 106