Gmail changes inline styles

Question

I'm creating a custom template in MailChimp, all styles are inline, but when I send a preview, Gmail either just doesn't display those styles, or alters them.

For example:

<span style="display: inline-block;width: 35px;height:4px;background-color: #ff4229;">&nbsp;</span>

Gmail will render as:

<span style="display:inline-block;width:35px;min-height:4px;background-color:#ff4229;"> </span>

Does anyone have an idea as to why this is happening? Thanks!

EDIT: I added max-height to inline style and now it's ok.

@Era the original has 'height' and the changed one has 'min-height' — caligula, Dec 01 '15 at 11:04
@Aaron thanks for pointing it out, it was just a mistake here :) I fixed it. Anyway, I still can't figure out why Gmail changes styles... — caligula, Dec 01 '15 at 12:27
If you check the supported CSS for email clients, you will see that you have some unsupported styles https://www.campaignmonitor.com/css/ — Aaron, Dec 01 '15 at 12:27
@Aaron thanks! It looks like Gmail doesn't support "display". So I changed span with div, but it still doesn't work :/ — caligula, Dec 01 '15 at 12:44

score 0 · Answer 1 · edited May 23 '17 at 12:23

The issue can stem from quite a few things, but likely is done by Gmail's preprocessor to ensure that it is safe to display within their email client. Basically this means that it makes changes to HTML/CSS that may cause issues (whether display or security) with the HTML/CSS that is used on their email client.

Outside that it could be from a million different ways the email gets read and edited on the way to your recipients inbox.

Please see links below for more info on this process:

https://litmus.com/blog/why-do-email-clients-render-emails-differently?utm_campaign=industry&utm_source=litmusblog&utm_medium=blog

https://litmus.com/blog/why-email-designs-break-rendering-guide-infographic?utm_campaign=industry&utm_source=litmusblog&utm_medium=blogs-break-rendering-guide-infographic

https://litmus.com/blog/webmail-rendering-explained-why-preprocessors-are-the-enemy

Also, height, width, display AND background-color are not accepted on a span for most email clients. There is even some contention on using DIV tags in email due to spotty support. You will need to utilize tables for most of these purposes. See below for some links on layout for HTML emails:

https://www.campaignmonitor.com/blog/email-marketing/2011/05/div-tags-in-html-email-newsletters/

HTML email: tables or divs?

Gmail changes inline styles

1 Answers1