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:

enter image description here

Two images stacked on each other look like this in GMail:

enter image description here

There must be a simple workaround?

possible duplicate of [Unwanted spacing below images in XHTML 1.0 Strict](http://stackoverflow.com/questions/948145/unwanted-spacing-below-images-in-xhtml-1-0-strict) — mercator, Aug 11 '11 at 22:24

score 32 · Answer 1 · answered Oct 26 '11 at 14:55

32

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

answered Oct 26 '11 at 14:55

Kit Sunde

35,972
25
125
179

1

If you set both height and max-height, max-height will be removed and height is still changed to min-height – KVM Apr 17 '14 at 09:29
This solution worked for me. The height is still converted to min-height but max-height is now obeyed. – Brian O'Neill Oct 28 '14 at 23:31
life saver! I set both min-height and max-height equal to the same value. It worked for me. – roopunk Jun 04 '15 at 04:29

mercator · Accepted Answer · 2011-07-17T10:17:43.933

17

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.

edited Jul 17 '11 at 10:17

answered Jul 17 '11 at 10:00

mercator

28,290
8
63
72

Wonderful! Thanks for this. You are exactly right, it worked perfectly. – Chuck Le Butt Jul 17 '11 at 10:17

score 8 · Answer 3 · answered Oct 13 '11 at 17:58

8

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.

answered Oct 13 '11 at 17:58

blackcatweb

1,003
1
10
11

No actually, that makes no difference in a browser like Firefox. You still need to change the alignment of the image in some way. – Chuck Le Butt Oct 13 '11 at 18:55

score 2 · Answer 4 · answered Sep 05 '12 at 08:42

2

Try using line-height instead!

answered Sep 05 '12 at 08:42

vondip

13,809
27
100
156

score 0 · Answer 5 · answered Dec 03 '14 at 19:24

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.

Subscriber email: GMail is converting height to min-height

5 Answers5

Linked