Gmail (or something) is changing my class names?

Question

Ok, this is weird. I have an HTML email template that I am trying to adjust. In the template, I have a standard <ul>. But, the client has requested that there be no margin above the list. So, easy enough. I just added a `margin-top: -10px' as a style:

 <ul style="margin-top: -10px;">
     <li>....</li>
 </ul>

But then when I sent myself the email, that style had been stripped out. It showed up like this:

 <ul>
     <li>....</li>
 </ul>

I thought maybe it was cached. So I changed the text of the top list item:

 <ul style="margin-top: -10px;">
     <li>This is a test</li>
 </ul>

Then I sent myself the email, and I got this:

 <ul>
     <li>This is a test</li>
 </ul>

So, I made a class:

.UlNoTopMargin {margin-top: -10px;}

And did this:

 <ul class="UlNoTopMargin">
     <li>This is a test</li>
 </ul>

I sent myself the email, and I got this:

<ul class="m_4942690989181909996UlNoTopMargin">
     <li>This is a test</li>
 </ul>

What the $@#!@!! is going on here? I'm using gmail to view the emails. Is Gmail doing this? If not, then where on earth is this coming from?

Answer 1

Gmail absolutely changes classnames in your email. If you create a style sheet and send it out, it will change the classnames in the style sheet and in the email body. It will also strip out any styles that it doesn't support, sometimes the entire sheet.

These are the CSS properties and queries supported by Gmail:

https://developers.google.com/gmail/design/reference/supported_css

Good luck.