Question

我正在寻找一个解决方案，我可以在其中添加填充到＆＃39; h1＆＃39;标签。下面的标记允许我在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

将新表格嵌套在100％宽度内，并为该td添加填充。

基本上是这样的：

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

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

Answer 3

我会在<div>内的<h1>附近添加<td>标记，并为其添加填充。

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

Answer 4

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

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

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

4 个答案: