如何在将图像保持为内联块的同时消除图像底部和包装器之间的空格?为什么会出现这种情况?
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;
}
vertical-align:top
或者vertical-align:middle
- 除了默认值vertical-align:baseline
以外的任何值都可以解决它。 - Yarininline-block
时,它会像对待文本中的一个大字符一样对待图像。它将使它与文本在同一基线上流动。但是,文本的基线并不是最底部,因为像g
和j
这样的字符需要延伸到比像a
和b
这样的字符更远的地方。当您为图像添加vertical-align: top
时,它将图像与基线顶部对齐,因此高字符的额外空间也向上移动。如您在例子中所见,使用vertical-align: middle
也可以起到同样的作用。 - Gavin