Search code examples
htmlcssemailgmail

Gmail removes in-line CSS

I've been having problems with gaps in-between my images on HTML emails I've been creating. I've learnt from guides online that using display: block on img tags works as an easy fix. However it seems gmail now removes all in-line CSS.

I use Chrome browser. I have also tested this in Firefox, Opera, Safari and IE. The issue is the same for all of them.

This also effects the issue with line-height on td tags. Some gaps were known to be caused by line-height issues and previously in-line css was a solution. Now, however, I can't write css in-line or embedded to override what gmail applies.

Does anyone know of a current work-around or solution?

For example, the following does not work on gmail using Chrome - the css is removed by gmail:

<table width="700" cellpadding="0" cellspacing="0" border="0" height="592">
    <tbody style="line-height:0px;padding:0;margin:0;" width="700" height="592">
    <tr width="700" height="296">
        <td style="line-height:0px;" width="441" height="296">
            <a href="[the url]" target="_blank" width="441" height="296">
                <img src="[the url]" style="display:block;border:0;" width="441" alt="[the alt text]" height="296"/>
            </a>
        </td>
        <td style="line-height:0px;" width="39" height="296">
            <img src="[the url]" style="display:block;border:0;" width="39" height="296"/>
        </td>
        <td style="line-height:0px;" width="220" height="296">
            <a href="[the url]" target="_blank" width="220" height="296">
                <img src="[the url]" style="display:block;border:0;" width="220" alt="[the alt text]" height="296"/>
            </a>
        </td>
    </tr>
    <tr style="line-height:0px;" width="700" height="296">
        <td style="line-height: 0px;" width="441" height="296">
            <a href="[the url]" target="_blank" width="441" height="296">
                <img src="[the url]" style="display:block;border:0;" width="441" alt="[the alt text]" height="296"/>
            </a>
        </td>
        <td style="line-height:0px;" width="39" height="296">
            <img src="[the url]" style="display:block;border:0;" width="39" height="296"/>
        </td>
        <td style="line-height:0px;" width="220" height="296">
            <a href="[the url]" target="_blank" height="296">
                <img src="[the url]" style="display:block;border:0;" width="220" alt="[the alt text]" height="296">
            </a>
        </td>
    </tr>
    </tbody>
</table>

PS - I'm aware some of the tags don't need those attributes - I've added them for testing purposes to be exhaustive and to ensure as much has been declared as possible.

Solution

  • Either the testing application or outlook may be trimming the inline style.

    Please try align:left also instead of display:block.