我正在尝试在电子邮件的两边添加填充，以便它在整个邮件程序中保持一致，但由于某种原因它似乎是一边倒的。我想要每行两侧各有一个 40 像素的间距，但似乎无法实现。
HTML
<link rel="stylesheet" href="ink.css"> <!-- For testing only -->
<style type="text/css">
/* Ink styles go here in production */
</style>
<style type="text/css">
.email-container {
border: 1px solid #cccccc;
padding: 0 40px !important;
}
.sub-columns {
padding: 15px !important;
}
.row-highlight {
background-color: #f5f5f5 !important;
}
.wrapper {
padding-top: 0 !important;
}
.bold {
font-weight: bold;
}
.product {
padding-left: 30px !important;
}
.bold-row td {
background-color: #ffffff;
font-weight: bold;
}
.row-secondary {
background-color: #ffffff;
}
.align-right {
text-align: right;
}
.invoice a,
.invoice a:visited,
.social a,
.social a:visited {
color: #c40162 !important;
font-size: 13px !important;
text-decoration: underline !important;
}
.nav,
.nav a {
color: #757575 !important;
font-size: 10px;
font-weight: bold;
text-decoration: underline;
text-align: right;
vertical-align: middle;
text-transform: uppercase;
}
.logo {
padding: 0 !important;
}
.social {
background-color: #e8e8e8!important;
color: #4d4d4d !important;
padding-top: 20px !important;
}
.title {
background-color: #ffffff;
border-bottom: 2px solid #f5f5f5;
border-left: 0 !important;
border-right: 0 !important;
border-top: 2px solid #f5f5f5;
font-size: 28px;
font-weight: bold;
padding: 30px 0 !important;
}
.footer {
background-color: #ffffff;
border-left: 0 !important;
border-right: 0 !important;
border-top: 2px solid #f5f5f5;
border-bottom: 0;
color: #171717;
font-size: 12px;
font-weight: bold;
padding: 20px 0 !important;
}
.footer a {
color: #c40162 !important;
text-decoration: underline;
}
.content {
background-color: #ffffff;
color: #171717;
line-height: 20px;
}
.content-title {
background-color: #ffffff;
font-size: 16px;
font-weight: bold;
padding: 15px !important;
}
.table-border-bottom {
border-bottom: 1px solid #e8e8e8;
}
.table-border-top {
border-top: 1px solid #e8e8e8;
}
.no-bottom-padding {
padding-bottom: 0 !important;
}
.spacer {
padding: 20px 0 0 0 !important;
}
</style>
</head>
<body style="background:#ddd">
<table class="body" style="background:#ddd">
<tr>
<td class="center" align="center" valign="top" >
<center>
<table class="email-container" style="background:#fff">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad spacer"></td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns nav">
<tr>
<!-- Logo -->
<td class="five sub-columns logo"><img height="50" width="50" src="http://placehold.it/50x50&text=LCN"></td>
<!-- Logo End -->
<!-- Nav Items-->
<td class="two sub-columns nav"><a href="#">Support</a></td>
<td class="two sub-columns nav"><a href="#">Contact</a></td>
<td class="two sub-columns nav last"><a href="#">Login</a></td>
<!-- Nav items End -->
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad spacer">
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="eleven columns">
<tr>
<td class="center text-pad title">Thank you for your order</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad">
<h5>Hi %%name%%,</h5>
<p class="lead">Thank you for your order.</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td align="text-pad">
<p>© 2015</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- container end below -->
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
CSS 标准 Zurb CSS
最佳答案
试试这个:https://jsfiddle.net/L5nvc6rn/2/
如果您在包含的 TD 上放置填充，那么它将为您提供您可能需要的填充，例如:
<td style="padding:40px;">
关于css - 使用 Zurb Ink 在容器上添加填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30216562/