消除inline-block图像下方的空格

Question

如何在将图像保持为内联块的同时消除图像底部和包装器之间的空格？为什么会出现这种情况？

http://jsfiddle.net/dJVxb/2/

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;
}

- Yarin

Answer 1

写vertical-align:top;，就像这样写：

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

查看此http://jsfiddle.net/dJVxb/4/

- sandeep

---

跟进来看，似乎你只需要使用 vertical-align:top 或者 vertical-align:middle - 除了默认值 vertical-align:baseline 以外的任何值都可以解决它。 - Yarin

解释请看这个例子：https://jsfiddle.net/1p1v896d/。当你使用 inline-block 时，它会像对待文本中的一个大字符一样对待图像。它将使它与文本在同一基线上流动。但是，文本的基线并不是最底部，因为像 g 和 j 这样的字符需要延伸到比像 a 和 b 这样的字符更远的地方。当您为图像添加 vertical-align: top 时，它将图像与基线顶部对齐，因此高字符的额外空间也向上移动。如您在例子中所见，使用 vertical-align: middle 也可以起到同样的作用。 - Gavin

即使经过这么多年，CSS仍然能够找到让我失望的新方法 :) - A.R.

Answer 2

这额外的空间是为了给行内文本中下降字符留出空间。下降字符是指像“y”和“g”一样向下延伸的字母部分。

如果您需要保留垂直对齐属性为中心或基线，则可以通过将line-height设置为0来解决此问题。

- CourtDemone