Question

我正在尝试在电子邮件的任何一侧添加填充，以便它在整个邮件程序中保持一致，但由于某种原因，它似乎很不稳定。我希望每排两侧都有一个40px的排水沟，但似乎无法实现它。

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>&#169; 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

jsfiddle：https://jsfiddle.net/pardigan/L5nvc6rn/1/

Answer 1

试试这个：https://jsfiddle.net/L5nvc6rn/2/

如果在填充的TD上放置填充，那么它将为您提供您可能需要的填充，例如：

<td style="padding:40px;">

使用Zurb Ink在容器上添加填充

1 个答案: