消除内联块图像下方的空间[重复]答案

【问题标题】：Get rid of space underneath inline-block image [duplicate]消除内联块图像下方的空间[重复]
【发布时间】：2012-05-23 15:39:06
【问题描述】：

如何消除图像底部和包装器之间的空间，同时将图像保持为内联块？为什么会这样？

HTML：

<div id="wrapper">
<img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" >                 
</div>

CSS：

#wrapper {
    background:green;
}
img {
    display:inline-block; 
    margin:0;
}

【问题讨论】：

【解决方案1】：

写vertical-align:top;。像这样写：

img {
    display:inline-block; 
    margin:0;
    vertical-align:top;
}

【讨论】：

要跟进，看起来您需要做的只是vertical-align:top 或vertical-align:middle - 除了默认的vertical-align:baseline 之外的任何东西都可以解决它。
解释，看这个例子：jsfiddle.net/1p1v896d。当您使用inline-block 时，它会将图像视为文本的大字符。它对齐它，以便它在与文本相同的基线上流动。但是，文本的基线不是最底端，因为像g 和j 这样的字符需要超出像a 和b 这样的字符。当您将vertical-align: top 添加到图像时，它会将图像与基线顶部对齐，因此高字符的额外空间也会向上移动。正如您在示例中看到的，使用vertical-align: middle 也可以。
即使这么多年过去了，CSS 还是找到了让我失望的新方法:)

【解决方案2】：

增加的空间是为了给下行者腾出空间，内联文本也是如此。降序是字母向下延伸的部分，例如 'y' 和 'g'。

如果您需要保留center 或baseline 的vertical-align 属性，可以通过将line-height 设置为0 来解决此问题。

【讨论】：