This is a seemingly known issue when delivering email to Google users: Google changes any \"height\" declarations to \"min-height\". This means that images that are stacked
I notice GMail does not interfere with a <td height="..."> attribute setting. So that might be a work-around if you can easily assign the problematic element into a table.
Add vertical-align: top, display: block or float: left on the image.
By default, images are inline blocks and are aligned to the baseline of text. This means that if you were to put any text next to them, the bottom of the image lines up with the bottom of the "x", not the bottom of the "y". The "reserved space" for this descender is what's causing the space between your images.
Any one of the property declarations I mentioned above will stop the image from aligning it with the text baseline, all in different ways.
Try using line-height instead!
I just ran into this issue and solved it by setting max-height which it doesn't mess with.
I had DIV tags that I was forcing to be display:table-cell
I resolved this by adding a 1px wide spacer image into the "cell" with a height attribute (not css style) set to the height I wanted the cell to be. This isn't ideal but got the job done and is cross-browser/email client.