img标签后的奇怪空白

Question

我似乎无法摆脱<img>和<div>之间的空格（红色）。这是我能得到的最小化。

我在其他类似的线程中发现，问题通常是由于inline-box元素之间的空格或换行符造成的。这不是这种情况。

如何摆脱空间？

＆＃13;

＆＃13;

div {
  display: inline-block;
  width: 5em;
}

#container {
  background-color: #F00;
}

img {
  background-color: #AFA;
  width: 5em;
  height: 4em;
}

#child {
  background-color: #AAF;
}

＆＃13;

<div id="container">
  <img src="404"><div id="child">CHILD</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将vertical-align: middle;或display: block;添加到img{}小规模。