如何添加最小边距Zurb墨水电子邮件内容

Question

这是我刚刚创建的一个Plunker: http://plnkr.co/edit/jKo6yavo9fFNHiMsEvAL?p=preview

这是一个简单的单行布局。我需要的是两边(左和右)的行固定的最小保证金。比方说25px。调整窗口大小应该始终在行前后显示至少25px的灰色背景。

我尝试修改table.container样式从:

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

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

但它似乎不工作的右页边距(走出页面)。任何建议吗?

Answer 1

我认为最简单的解决方案是使用左右表格边框而不是外边距。

类似下面的CSS应该可以达到这个效果。

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

由于不是所有的电子邮件客户端都支持边距，你的其他选择是在外部表/表中添加填充/边框。