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 no longer "touch" each other without a gap.
Does anyone know of a good work around?
Here's an example:
<div style="height:244px">
<img src="http://www.domain.com/images/top.gif" alt="" />
</div>
<div style="height:266px">
<img src="http://www.domain.com/images/bottom.gif" alt="" />
</div>
Appears as the following in GMail:
<div style="min-height:244px">
<img src="http://www.domain.com/images/top.gif" alt="" />
</div>
<div style="min-height:266px">
<img src="http://www.domain.com/images/bottom.gif" alt="" />
</div>
So instead of this:
Two images stacked on each other look like this in GMail:
There must be a simple workaround?
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.
I just ran into this issue and solved it by setting max-height which it doesn't mess with.
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.
Try using line-height instead!
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.
来源：https://stackoverflow.com/questions/6711165/subscriber-email-gmail-is-converting-height-to-min-height