Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's an alternative to margin in HTML Email?

Tags:

css

html-email

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

like image 881
Jaspero Avatar asked Oct 19 '11 22:10

Jaspero


2 Answers

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.

like image 101
Ernesto Avatar answered Oct 13 '22 20:10

Ernesto


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/

like image 21
xmarcos Avatar answered Oct 13 '22 22:10

xmarcos