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
Change the img
s 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
div
s which has the dimensions set only on the inner one. http://jsfiddle.net/TLBEx/4/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With