My efforts to remove the space (red) between the <img> and the <div> have been unsuccessful. I have minimized it as much as possible.
After researching similar threads, it seems that whitespace or newlines between inline-box elements can cause this issue. However, that is not the problem in this case.
What steps can be taken to eliminate the space?
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>