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

Question

我正在寻找可以向 '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>

Answer 1

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

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

//编辑：

如果这仅用于电子邮件，我会使用表格 space 像这样：

<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>

Answer 2

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

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

Answer 3

在 100% 宽度处嵌套一个新的 table 并向该 td 添加填充。

所以基本上：

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

Answer 4

经过一系列欺骗和用户 Gortonington 的帮助，我能够使用此处找到的标记找到 solution.By Bullet Proof Background 我能够使背景图像正确显示在外表。为了向 h1 标签添加填充，我使用了 Gortonigton 的建议并添加了一个宽度为 100% 的额外 table，然后向中添加了填充样式以正确对齐文本。感谢大家的帮助！

 <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>

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

How can I add padding to a <td> without effecting the background image?

html

css

outlook

html-email

responsive-design