IMG inside inline-block DIV pushes DIV lower

It's not just images. Try putting some text inside one of the other DIV's and it will shift also.

This is an issue of inline flow. The IMG element (or text), by default, wants to participate in inline alignment. So the bottom of the image will be on the baseline if it can. Then try putting a word in between the DIVs to make the baseline reference visible. See the the image bottom and text bottom are on a line. The DIV is aligning to the image or text inside it (at the top). The DIV's without contents are establishing the baseline. The contents of the DIVs that have them are aligning to it.

You can change the image alignment with the text in between (whether you have some or not) by adding a vertical-align property to the IMG. Try setting it to "top" or "middle", the image will move and the DIV will follow.

You already know if you change the image display mode to block, it will no longer care about inline flow, and "fix" the DIV position. But you can also "fix" the DIV by giving it its own vertical-align property (other than "baseline"). But this time, changing it doesn't move the red boxes but instead moves the text in between (or the invisible reference if there isn't any). That's because now you're positioning the DIV elements relative to the baseline, but the baseline itself is "flowing" up or down in the outer container.