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

4

1 Answer 1

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/

1
  • It works even i give font-size:0 but i need concept going on it
    – Amerrnath
    Jun 6, 2014 at 12:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.