Html 链接标签内的图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24082128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image inside link tag
提问by Amerrnath
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 tagthe wrapping image height is actually more than 50pxeven though there is no text in a tag. But when i give font-size:0it Works .
结果是一个标签，即使标签中没有文本，包装图像的高度实际上也超过了 50 像素。但是当我给font-size:0它 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
请帮助我理解这些概念，而不仅仅是一些 css 代码
I have sample its . please help me with this .
我有它的样本。请帮我解决一下这个 。
http://jsfiddle.net/amerrnath/TLBEx/
http://jsfiddle.net/amerrnath/TLBEx/
Ok Sorry i got the answer from the link .
好的，对不起，我从链接中得到了答案。
White space at bottom of anchor tag
Thank you
谢谢
回答by yunzen
Change the imgs displayto block
将imgs更改display为block
a {
display:inline-block;
}
a img {
display:block;
}
See this jsfiddle
看到这个jsfiddle
So what does it do? The image inside the link has a default displayof inline-block. The a you set to display:inline-block. It's the combination of the two in combination with whitespace inside the aelement, that does the problem.
那么它有什么作用呢？链接内的图像默认display为inline-block。您设置的 a display:inline-block。这是两者的组合与a元素内的空白相结合，这就是问题所在。
You can simulate with two nested inline-blockdivs which has the dimensions set only on the inner one. http://jsfiddle.net/TLBEx/4/
您可以使用两个嵌套的inline-blockdivs进行模拟，这些 s 的尺寸仅设置在内部尺寸上。http://jsfiddle.net/TLBEx/4/
