Inline element inside inline-block div

Can't get my head around on why <img> inside <div style="display: inline-block"> pushes that div lower from top?

HTML

<div id="wrapper"><div id="a1"><img src='...' alt=""/></div><div id="a2"></div><div id="a3"></div><div id="a4"></div><div id="a5"></div><div id="a6"></div><div id="a7"></div><div id="a8"></div></div>

CSS

div > div {    background: red;    height: 200px;    width: 19%;    text-align: center;    margin: 0 5% 5% 0;    display: inline-block;}img {    height: 128px;    width: 128px;    display: /* "BLOCK" FIXES THE ISSUE */; }

EDIT

Setting img to display: block fixes the issue. But could anyone explain me why there is such a behaviour without that display: block?