【发布时间】：2017-07-08 09:09:56
【问题描述】：
我似乎无法摆脱<img> 和<div> 之间的空格（红色）。这是我能得到的最小的。
我在其他一些类似的线程上发现问题通常是由于inline-box 元素之间的空格或换行符造成的。这不是这里的情况。
如何摆脱空间？
div {
display: inline-block;
width: 5em;
}
#container {
background-color: #F00;
}
img {
background-color: #AFA;
width: 5em;
height: 4em;
}
#child {
background-color: #AAF;
}<div id="container">
<img src="404"><div id="child">CHILD</div>
</div>【问题讨论】：
-
将
img元素的display更改为block，或将vertical-align: top添加到img元素。 -
请记住，默认情况下，图像是内联级元素，它们接收基线对齐：stackoverflow.com/a/31445364/3597276
-
@JoshCrozier 这比我想象的要容易得多！为什么会这样呢？
-
JeroenBollen - 查看@Michael_B 编写并链接到的答案。
-
@Michael_B 哦，原来如此！谢谢你们！