Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image inside link tag [duplicate]

Tags:

html

css

web

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

like image 870
Amerrnath Avatar asked Jun 06 '14 12:06

Amerrnath


1 Answers

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/

like image 166
yunzen Avatar answered Sep 28 '22 03:09

yunzen