如何在不影响背景图像的情况下向 <td> 添加填充？答案

【问题标题】：How can I add padding to a <td> without effecting the background image?如何在不影响背景图像的情况下向 <td> 添加填充？
【发布时间】：2015-09-07 07:33:52
【问题描述】：

我正在寻找一种可以向“h1”标签添加填充的解决方案。下面的标记允许我在 Outlook 中渲染背景图像。但是，当我向td 添加填充时，这样做会向背景添加填充——这不是我想要的结果。有谁知道我如何向与 Outlook 电子邮件客户端兼容的h1 添加填充？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>
    <table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
        <tr>
            <td style="padding-left:35px;" class="mbl-pad-1" background="images/banner1.jpg" bgcolor="#7bceeb" width="600" height="248" valign="middle" >
              <!--[if gte mso 9]>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:248px;">
                <v:fill type="tile" src="images/banner1.jpg" color="#7bceeb" />
                <v:textbox inset="0,0,0,0">
              <![endif]-->

                <h1 class="emailh1" style="font-size:65px; line-height:60px; font-family:Arial, sans-serif; color:#fff; text-align:left; margin:0;">DO YOU TRUST<br/>YOUR SOURCE?</h1>

              <!--[if gte mso 9]>
                </v:textbox>
              </v:rect>
              <![endif]-->

            </td>
        </tr>
    </table>
</body>
</html>

【问题讨论】：

您的标记存在多个语法问题。首先验证您的 HTML。
现在应该会更好。再次检查
我在您的 html 中没有看到任何 h2 标记
抱歉，这只是主 html 文件中的一个 sn-p。我已经对其进行了编辑以消除任何混淆。

标签： html css responsive-design outlook html-email

【解决方案1】：

在 100% 宽度的内部嵌套一个新表格，并为该 td 添加填充。

所以基本上：

 <td with background >
      <table width="100%">
      <tr>
      <td style="padding: Xpx;">your content</td>
      </tr>
      </table>
   </td>

【讨论】：

【解决方案2】：

经过一番摸索和用户 Gortonington 的帮助，我找到了解决方案。通过使用此处找到的标记Bullet Proof Background，我能够让背景图像在 Outlook 中正确显示。为了给 h1 标签添加内边距，我使用了 Gortonigton 的建议并添加了一个宽度为 100% 的额外表格，然后添加了一个内边距样式以正确对齐文本。感谢大家的帮助！

 <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
        <td background="images/banner1.jpg" bgcolor="#333" width="100%" valign="top">
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:248px;">
            <v:fill type="tile" src="images/banner1.jpg" color="#333" />
            <v:textbox inset="0,0,0,0">
          <![endif]-->
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td class="mbl-pad-1" style="padding-left:35px; padding-top:60px; padding-bottom:60px;">
                    <h1 class="emailh1" style="font-size:65px; line-height:60px; font-family:Arial, sans-serif; color:#fff; text-align:left; margin-top:0; margin-bottom:0;">DO YOU TRUST<br/>YOUR SOURCE?</h1>
                  </td>
            </tr>
          </table>
          <!--[if gte mso 9]>
          </v:textbox>
          </v:rect>
          <![endif]-->
          </td>
   </tr>
 </table>

【讨论】：

【解决方案3】：

为H1标签添加margin-left:35px;

<td>
<h1 style="margin-left:35px;"></h1>
</td>

【讨论】：

我试过这个。 Outlook 不支持 h1 标签中的边距

【解决方案4】：

我会在<td> 内的<h1> 周围添加一个<div> 标记，并为其添加填充。

<td>
    <div style="padding: 10px;">
        <h1>...</h1>
    </div>
</td>

//编辑：

如果这只是用于电子邮件，我会像这样使用表格来分隔它：

<td>
    <table>
        <tr><td colspan="3" height="10"></td></tr>
        <tr>
            <td width="10"></td>
            <td><h1>...</h1></td>
            <td width="10"></td>
        </tr>
        <tr><td colspan="3" height="10"></td></tr>
    </table>
</td>

【讨论】：

我也试过了，outlook 不会在 div 标签中呈现填充。