Html 去除内联块图像下方的空间

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

HTML:

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

---

​

写入

垂直对齐：顶部。这样写：

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

检查此项
是否添加了空间，以便在有内联文本的情况下为后代腾出空间。下行字母是字母向下延伸的部分，如“y”和“g”

如果需要保留
center
或
baseline
的
vertical align
属性，可以通过将
行高设置为
0
来解决此问题
 接下来，看起来您需要做的就是
垂直对齐：顶部
或
垂直对齐：中间
-除了defaut
垂直对齐：基线
之外的任何操作都可以修复它。有关说明，请参阅此示例：。使用
inline block
时，它将图像视为一个大的文本字符。它将其对齐，使其与文本在同一基线上流动。但是，文本的基线不是最底层，因为像
g
和
j
这样的字符需要扩展到像
a
和
b
这样的字符之外。将
垂直对齐：top
添加到图像时，会将图像与基线顶部对齐，因此高字符的额外空间也会上移。正如您在示例中所看到的，使用
vertical align:middle
也会起作用。即使这么多年过去了，CSS仍然找到了让我失望的新方法：）
img {
    display:inline-block; 
    margin:0;
    vertical-align:top;
}