IMG标签之后的怪异空格

Question

我似乎无法摆脱<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>

Answer 1

将vertical-align: middle;或display: block;添加到您的 img{} -rules。