What's an alternative to margin in HTML Email?

2019-05-03 02:49发布

问题:

Hotmail does not support margin in HTML emails. Is there an alternative?

回答1:

I would suggest use tables and play with the width of columns. HTML emails are sometimes better with tables. Also, you can take a look at an email you have in your inbox that does what you want and inspect source code.

As this answer seems a little vague I would also like to point to a very complete answer which covers in more details html emails.

Note:

When it comes to email HTML, note that all best practices from web development goes out the window.



回答2:

Here is an example using tables,

<table border="0" cellspacing="0" cellpadding="0" align="left" style="width:600px;margin:0 auto;background:#FFF;">
    <tr>
        <td colspan="5" style="padding:15px 0;">
            <h1 style="color:#000;font-size:24px;padding:0 15px;margin:0;">Header</h1>
        </td>
    </tr>
    <tr>
        <td style="width:15px;">&nbsp;</td>
        <td style="width:375px;">
            Left Column Content
        </td>
        <td style="width:15px;">&nbsp;</td>
        <td style="width:180px;padding:0 0 0 0;">
            Sidebar Content
        </td>
        <td style="width:15px;">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="5" style="padding:15px 0;">
            <p style="color:#666;font-size:12px;padding:0 15px;margin:0;">Footer</p>
        </td>
    </tr>
</table>

Live here http://jsfiddle.net/Wr76m/



回答3:

I was able to get away with transparent horizontal bars, using padding to modify the height. For example:

<hr style="border: transparent; padding: 1px;">