Why does vertical middle can remove whitespace after image images?

HTML & CSS
1

I don’t understand why white space after my image is removed when i add a vertical:middle style. Can anyone explain this to me?

Here is my code:

http://codepen.io/thehung1724/pen/nkavd
2

Images are placed by default on the baseline not the bottom (just as text is) which leaves room underneath for descenders and so that the bottom of the image is at the bottom of the text (bar the descender). When you change the vertical-alignment to middle then it is no longer on the baseline and the gap underneath disappears.