Html 摆脱内联块图像下方的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10612380/
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
Get rid of space underneath inline-block image
提问by Yarin
How do I get rid of the space between the bottom of the image and the wrapper, while keeping the image as inline-block? Why is this happening?
如何消除图像底部和包装器之间的空间，同时将图像保持为内联块？为什么会这样？
HTML:
HTML：
<div id="wrapper">
<img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" >
</div>
CSS:
CSS：
?#wrapper {
background:green;
}
img {
display:inline-block;
margin:0;
}
?
?
回答by sandeep
Write vertical-align:top;. Write like this:
写vertical-align:top;。像这样写：
img {
display:inline-block;
margin:0;
vertical-align:top;
}
Check this http://jsfiddle.net/dJVxb/4/
回答by CourtDemone
That added space is there to make room for descenders were there inline text as well. Descenders are parts of letters that reach down, like in 'y' and 'g'.
如果有内联文本，那么增加的空间是为下行腾出空间。Descenders 是字母向下延伸的部分，例如“y”和“g”。
If you need to retain a vertical-alignproperty of centeror baseline, you can fix this by setting your line-heightto 0.
如果您需要保留或的vertical-align属性，您可以通过将您设置为来解决此问题。centerbaselineline-height0
