Home/ Questions/Q 6154717
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T20:18:31+00:00

This is a seemingly known issue when delivering email to Google users: Google changes

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0