Subscriber email: GMail is converting height to min-height

Question

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?

Answer 1

I just ran into this issue and solved it by setting max-height which it doesn't mess with.

Answer 2

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.

Answer 3

Try using line-height instead!

Answer 4

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.