How to add minimum margin to Zurb Ink email content?

Question

Here is a Plunker I just created: http://plnkr.co/edit/jKo6yavo9fFNHiMsEvAL?p=preview

It is a simple single row layout. What I need is a fixed minimum margin on both sides (left and right) of the row. Let's say 25px. Resizing the window should always show at meast 25px of grey background before and after the row.

I tried modifying the table.container style from:

table.container {
    width: 580px;
    margin: 0 auto;
    text-align: inherit;
}

to

table.container {
    width: 580px;
    margin: 0 25px 0 25px;
    text-align: inherit;
}

But it seems it does not work for the right margin (goes out of the page). Any suggestion?

Answer 1

I think the simplest solution would be to use the left and right table borders instead of margin.

Something like the CSS below should do the trick.

table.container {
    width: 580px;
    border-left: solid 25px #f1f0ef !important;
    border-right: solid 25px #f1f0ef !important;
    text-align: inherit;
}

Since not all email clients support margin your other option would be to add padding/border to an outer table/tables.

If you have any questions let me know.