摆脱内联块图像下方的空间

Question

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

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

在此输入图像描述

Answer 1

写vertical-align:top;.像这样写:

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

为了跟进,看起来你需要做的就是`vertical-align:top`或`vertical-align:middle` - 除了defaut`vertical-align:baseline`之外的任何东西都会修复它. (4认同)
有关解释,请查看此示例:https://jsfiddle.net/1p1v896d/.当你使用`inline-block`时,它会将图像视为一个大文本字符.它将它对齐,使其与文本在同一基线上流动.但是,文本的基线不是最底层的,因为像`g`和`j`这样的字符需要扩展到像'a`和`b`这样的字符之外.当您向图像添加"vertical-align:top"时,它会将图像对齐到基线的顶部,因此高字符的额外空间也会向上移动.正如您在示例中所看到的,使用`vertical-align:middle`也可以. (2认同)

Answer 2

如果有内联文本,增加的空间就是为下行器腾出空间.下降部分是向下伸出的字母的一部分,如"y"和"g".

如果您需要保留或的vertical-align属性,可以通过设置为来解决此问题.centerbaselineline-height0