html - html 电子邮件中的布局-6ren

html - html 电子邮件中的布局

转载作者：行者123 更新时间：2023-11-27 22:48:40

我使用了一个 html 电子邮件模板并对其进行了修改，但电子邮件在顶部显示时带有较大的白色边距。我该如何减少这个？我正在使用 android 邮件客户端接收邮件，在页面的头部和顶部(主题栏)之间，有太多的边距(空白。我想把整个东西放在页面的顶部

/* ------------------------- 
    ------------
    INLINED WITH 
    htmlemail.io/inline
    ---------------------------- 
    --------- */


/* ------------------------- 
    ------------
    RESPONSIVE AND MOBILE 
    FRIENDLY STYLES
    ---------------------------- 
    --------- */

@media only screen and (max- width: 620px) {
  table[class=body] h1 {
    font-size: 28px !important;
    margin-bottom: 10px !important;
  }
  table[class=body] p,
  table[class=body] ul,
  table[class=body] ol,
  table[class=body] td,
  table[class=body] span,
  table[class=body] a {
    font-size: 16px !important;
  }
  table[class=body] .wrapper,
  table[class=body] .article {
    padding: 10px !important;
  }
  table[class=body] .content {
    padding: 0 !important;
  }
  table[class=body] .container {
    padding: 0 !important;
    width: 100% !important;
  }
  table[class=body] .main {
    border-left-width: 0 !important;
    border-radius: 0 !important;
    border-right-width: 0 !important;
  }
  table[class=body] .btn table {
    width: 100% !important;
  }
  table[class=body] .btn a {
    width: 100% !important;
  }
  table[class=body] .img- responsive {
    height: auto !important;
    max-width: 100% !important;
    width: auto !important;
  }
}


/* ------------------------- 
     ------------
    PRESERVE THESE STYLES IN THE 
    HEAD
    ---------------------------- 
    --------- */

@media all {
  .ExternalClass {
    width: 100%;
  }
  .ExternalClass,
  .ExternalClass p,
  .ExternalClass span,
  .ExternalClass font,
  .ExternalClass td,
  .ExternalClass div {
    line-height: 100%;
  }
  .apple-link a {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
  }
  #MessageViewBody a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  .btn-primary table td:hover {
    background-color: #34495e !important;
  }
  .btn-primary a:hover {
    background-color: #34495e !important;
    border-color: #34495e !important;
  }
}

<body class="" style="background-color: 
    #f6f6f6; font-family: sans- 
    serif; -webkit-font. 
    smoothing: antialiased; 
    font-size: 14px; line- 
    height: 1.4; margin: 0; 
    padding: 0; -ms-text-size- 
    adjust: 100%; -webkit-text-s 
    size-adjust: 100%;">
  <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: 
    separate; mso-table-lspace: 
    0pt; mso-table-rspace: 0pt; 
    width: 100%; background. 
    color: #f6f6f6;">
    <tr>
      <td style="font-family: 
    sans-serif; font-size: 14px; 
    vertical-align: top;">&nbsp;
      </td>
      <td class="container" style="font-family: sans- 
    serif; font-size: 14px; 
    vertical-align: top; 
    display: block; Margin: 0 
    auto; max-width: 580px; 
    padding: 10px; width: 
    580px;">
        <div class="content" style="box-sizing: border. 
    box; display: block; 
    Margin: 0 auto; max-width: 
    580px; padding: 10px;">

          <!-- START CENTERED WHITE 
    CONTAINER -->
          <span class="preheader" style="color: transparent; 
    display: none; height: 0; 
    max-height: 0; max-width: 0; 
    opacity: 0; overflow: 
    hidden; mso-hide: all; 
    visibility: hidden; width: 
    0;">Post an ad today and 
    start selling your unwanted 
    items.</span>
          <table class="main" style="border-collapse: 
    separate; mso-table-lspace: 
    0pt; mso-table-rspace: 0pt; 
    width: 100%; background: 
    #ffffff; border-radius: 
    3px;">

            <!-- START MAIN CONTENT AREA 
    -->
            <tr>
              <td class="wrapper" style="font-family: sans- 
    serif; font-size: 14px; 
    vertical-align: top; box- 
    sizing: border-box; padding: 
    20px;">
                <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: 
    separate; mso-table-lspace: 
    0pt; mso-table-rspace: 0pt; 
    width: 100%;">
                  <tr>
                    <td style="font-family: 
    sans-serif; font-size: 14px; 
    vertical-align: top;">
                      <p style="font-family: sans- 
    serif; font-size: 14px; 
    font-weight: normal; margin: 
    0; Margin-bottom: 15px;">.
                      </p>
                      <p style="font-family: sans- 
    serif; font-size: 14px; 
    font- 
    weight: normal; margin: 0; 
    Margin-bottom: 15px;">.
                        <center><img src="http://adsler.co.uk/wp- 
    content/uploads/2019/
    07/Photo_1563667417091.png" alt="Useful alt text" width="300" height="60" border="0" style="border:0; 
    outline:none; text. 
    decoration:none; 
    display:block;"><br><br>.
                        </center>
                        Hey there and welcome to Adsler. Just in case you didn't know, you can also post ads for property, jobs, items wanted or for sale, motors, mobile phones and much more. </p>
                      <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
                        <tbody>
                          <tr>
                            <td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
                              <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"><br><br>
                                <center>
                                  <tbody>
                                    <tr>
                                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="https://adsler.co.uk" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;"
                                          rel="https://adsler.co.uk noopener noreferrer">Post Today</a> </td>
                                    </tr>
                                  </tbody>
                                </center>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <center>
                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Just Click the button</p>
                      </center>
                      <center>
                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Happy posting.</p>
                      </center>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- END MAIN CONTENT AREA -->
          </table>

          <!-- START FOOTER -->
          <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
              <tr>
                <td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
                  <span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Adsler.co.uk, 49a-49b Friern Barnet Road.</span>
                  <br>
                  <a href="https://adsler.co.uk/contact" style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;"></a>.
                </td>
              </tr>
              <tr>
                <td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
                  <a href="https://adsler.co.uk" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;"></a>.
                </td>
              </tr>
            </table>
          </div>
          <!-- END FOOTER -->

          <!-- END CENTERED WHITE CONTAINER -->
        </div>
      </td>
      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
    </tr>
  </table>
</body>

变化的例子..

<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font- 
family: sans-serif; font-size: 
14px; vertical-align: top; box- 
sizing: border-box; padding: 0 
20px;">
<table border="0" cellpadding="0" 
cellspacing="0" style="border. 
collapse: 
separate; mso-table-lspace: 0pt; 
mso-table-rspace: 0pt; width: 
100%;">
<tr>
<td style="font-family: sans-serif; 
font-size: 14px; vertical-align: 
top;">
<center><img 
src="http://adsler.co.uk/wp--  
content/uploads/2019/07/Ph
oto_1563667417091.png" alt="Useful 
alt text" width="300" height="60" 
border="0" style="border:0; 
outline:none; text-decoration:none; 
display:block;"><br><br></center>
Hey there and welcome to Adsler. 
Just in case you didn't know, you 
can also post ads for property, 
jobs, items wanted or for sale, 
motors, mobile phones and much 
more.
<table border="0" cellpadding="0" 
cellspacing="0" class="btn bt

最佳答案

你有一对空的 <p> header 图片上方的标签和周围的 <td>有一个 20px 的内边距。

/* ------------------------- 
    ------------
    INLINED WITH 
    htmlemail.io/inline
    ---------------------------- 
    --------- */


/* ------------------------- 
    ------------
    RESPONSIVE AND MOBILE 
    FRIENDLY STYLES
    ---------------------------- 
    --------- */

@media only screen and (max- width: 620px) {
  table[class=body] h1 {
    font-size: 28px !important;
    margin-bottom: 10px !important;
  }
  table[class=body] p,
  table[class=body] ul,
  table[class=body] ol,
  table[class=body] td,
  table[class=body] span,
  table[class=body] a {
    font-size: 16px !important;
  }
  table[class=body] .wrapper,
  table[class=body] .article {
    padding: 10px !important;
  }
  table[class=body] .content {
    padding: 0 !important;
  }
  table[class=body] .container {
    padding: 0 !important;
    width: 100% !important;
  }
  table[class=body] .main {
    border-left-width: 0 !important;
    border-radius: 0 !important;
    border-right-width: 0 !important;
  }
  table[class=body] .btn table {
    width: 100% !important;
  }
  table[class=body] .btn a {
    width: 100% !important;
  }
  table[class=body] .img- responsive {
    height: auto !important;
    max-width: 100% !important;
    width: auto !important;
  }
}


/* ------------------------- 
     ------------
    PRESERVE THESE STYLES IN THE 
    HEAD
    ---------------------------- 
    --------- */

@media all {
  .ExternalClass {
    width: 100%;
  }
  .ExternalClass,
  .ExternalClass p,
  .ExternalClass span,
  .ExternalClass font,
  .ExternalClass td,
  .ExternalClass div {
    line-height: 100%;
  }
  .apple-link a {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
  }
  #MessageViewBody a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  .btn-primary table td:hover {
    background-color: #34495e !important;
  }
  .btn-primary a:hover {
    background-color: #34495e !important;
    border-color: #34495e !important;
  }
}

<body class="" style="background-color: 
    #f6f6f6; font-family: sans- 
    serif; -webkit-font. 
    smoothing: antialiased; 
    font-size: 14px; line- 
    height: 1.4; margin: 0; 
    padding: 0; -ms-text-size- 
    adjust: 100%; -webkit-text-s 
    size-adjust: 100%;">
  <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: 
    separate; mso-table-lspace: 
    0pt; mso-table-rspace: 0pt; 
    width: 100%; background. 
    color: #f6f6f6;">
    <tr>
      <td style="font-family: 
    sans-serif; font-size: 14px; 
    vertical-align: top;">&nbsp;
      </td>
      <td class="container" style="font-family: sans- 
    serif; font-size: 14px; 
    vertical-align: top; 
    display: block; Margin: 0 
    auto; max-width: 580px; 
    padding: 10px; width: 
    580px;">
        <div class="content" style="box-sizing: border. 
    box; display: block; 
    Margin: 0 auto; max-width: 
    580px; padding: 10px;">

          <!-- START CENTERED WHITE 
    CONTAINER -->
          <span class="preheader" style="color: transparent; 
    display: none; height: 0; 
    max-height: 0; max-width: 0; 
    opacity: 0; overflow: 
    hidden; mso-hide: all; 
    visibility: hidden; width: 
    0;">Post an ad today and 
    start selling your unwanted 
    items.</span>
          <table class="main" style="border-collapse: 
    separate; mso-table-lspace: 
    0pt; mso-table-rspace: 0pt; 
    width: 100%; background: 
    #ffffff; border-radius: 
    3px;">

            <!-- START MAIN CONTENT AREA 
    -->
            <tr>
              <td class="wrapper" style="font-family: sans- 
    serif; font-size: 14px; 
    vertical-align: top; box- 
    sizing: border-box; padding: 
    0 20px;">
                <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: 
    separate; mso-table-lspace: 
    0pt; mso-table-rspace: 0pt; 
    width: 100%;">
                  <tr>
                    <td style="font-family: 
    sans-serif; font-size: 14px; 
    vertical-align: top;">                                           
                        <center><img src="http://adsler.co.uk/wp- 
    content/uploads/2019/
    07/Photo_1563667417091.png" alt="Useful alt text" width="300" height="60" border="0" style="border:0; 
    outline:none; text. 
    decoration:none; 
    display:block;"><br><br>.
                        </center>
<p style="font-family: sans- 
    serif; font-size: 14px; 
    font- 
    weight: normal; margin: 0; 
    Margin-bottom: 15px;">Hey there and welcome to Adsler. Just in case you didn't know, you can also post ads for property, jobs, items wanted or for sale, motors, mobile phones and much more. </p>
                      <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
                        <tbody>
                          <tr>
                            <td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
                              <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"><br><br>
                                <center>
                                  <tbody>
                                    <tr>
                                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="https://adsler.co.uk" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;"
                                          rel="https://adsler.co.uk noopener noreferrer">Post Today</a> </td>
                                    </tr>
                                  </tbody>
                                </center>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <center>
                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Just Click the button</p>
                      </center>
                      <center>
                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Happy posting.</p>
                      </center>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- END MAIN CONTENT AREA -->
          </table>

          <!-- START FOOTER -->
          <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
              <tr>
                <td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
                  <span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Adsler.co.uk, 49a-49b Friern Barnet Road.</span>
                  <br>
                  <a href="https://adsler.co.uk/contact" style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;"></a>.
                </td>
              </tr>
              <tr>
                <td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
                  <a href="https://adsler.co.uk" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;"></a>.
                </td>
              </tr>
            </table>
          </div>
          <!-- END FOOTER -->

          <!-- END CENTERED WHITE CONTAINER -->
        </div>
      </td>
      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
    </tr>
  </table>
</body>

关于html - html 电子邮件中的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59554629/

文章推荐： jquery - CSS — Firefox 对 Chrome/Safari 给出了完全不同的解释

文章推荐： jquery - 为什么宽度为 :100% doesn't work in typahead input?

电子邮件:具有互斥值的合法重复电子邮件标题键
在电子邮件中 Received: header 可以合法地多次出现，并且具有互斥的值... Received: three.example.com Received: two.example.co
如果出现错误，SAS 电子邮件
是否有任何代码/宏可以合并到我的 sas 程序中，一旦我的 sas 代码在运行时发生错误，它会立即给我发送电子邮件？另外，这封电子邮件是否可能包含发生的错误？最佳答案是的……也不是…… 这是可能
HTML 电子邮件 - 使图像适合表格单元格
我有一个包含三个 td 的表格，每个表格都需要包含图像。 td 的宽度和高度是固定的，但图像大小可以变化。目标是在不扭曲单元格或图像本身的情况下拟合图像。不能使用 background-image 属
iphone - 如何从应用程序发送短信/电子邮件
首先非常感谢大家过去提出的宝贵建议，我们正在创建一个应用程序，在某些事件中想要将电子邮件/短信发送到我们已经尝试过 openURL 调用的指定电话号码，但它会打开现有的内置iPhone 的电子邮件/短
Java 电子邮件 - 异常服务器不受信任
我正在使用 apache commons mail 发送电子邮件。不幸的是，我遇到了以下异常: org.apache.commons.mail.EmailException: Sending the
mercurial - 为一个项目设置一个多变的用户名/电子邮件？
我可以在我的 ~/.hgrc 文件中设置我常用的电子邮件地址，但是有没有办法为一个 hg 项目指定我想被称为不同的名称/电子邮件(类似到项目目录中的 git 的 .git/config 文件覆盖 ~/
php - 电子邮件——在电子邮件中换行的正确方法是什么？
$message = 'New user registration\n\n There is a new submission on the site and below are the detail
带有图像的 php 电子邮件()
使用 outlook 我可以发送在邮件正文中插入图像的电子邮件(不是作为附件)。我如何使用 PHP 中的 mail() 函数来做到这一点？最佳答案我会推荐 Swift Mailer: http:/
VBA 电子邮件，正文中粘贴有图表和文本
以下代码的目标是将所选图表粘贴到我的文本下方的电子邮件正文中。但是，它继续将其粘贴在我的文本上方。我该如何更改它以使其粘贴在下面？谢谢! Set OutApp = CreateObject("Outl
Java 正则表达式电子邮件
首先，我知道不建议使用正则表达式发送电子邮件，但我必须对此进行测试。我有这个正则表达式: \b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b 在 Java 中，我这样
Python 电子邮件？最简单的方法？
如何在没有任何第三方程序的情况下从 Python 发送电子邮件？最佳答案使用Python email和 smtplib模块。示例:http://docs.python.org/library/em
新页面上的 php 电子邮件
我目前正在使用此代码在 html 表中显示 mysql 记录 "; . . echo ' '. $row["Email1"] . ' '; . . echo ""; }
HTML 电子邮件 - 为链接的一部分着色
在电子邮件中使用 HTML 时，是否可以仅将链接的一部分着色为特定颜色？我试过: red part of link normal part ...我知道如果我拆分链接是可能的，但我正在努力将它们保持
html 电子邮件 - 将元素向下移动页面？
我正在处理一封 html 电子邮件，我有一个非常简单的元素 (ul)，我想将它移到页面下方。我检查了campaign monitor's guide并且不支持负边距，或者 position: abs
HTML 电子邮件 - 使用背景图片
我使用表格创建了我的 HTML 电子邮件，该表格有一个背景图像，在大多数基于 Web 的电子邮件客户端中都能正常显示。我正在努力让背景图片显示在 Outlook 中。我最近的尝试，我尝试了以下操作
php - 在发送之前格式化文本区域(电子邮件)
我对 PHP/CSS 和一般编程还很陌生。我想改变文本区域中文本的格式，就像在这里所做的那样，例如，当为突出显示的文本添加标签“代码示例”时，它会缩进它，或者当将它设置为粗体时，它会加粗它。这样做
C++ 电子邮件/SMTP
嘿，你能推荐我哪些 C++ 库或类可用于在 C++ 中通过 SMTP 发送电子邮件。我在 Windows 平台上。我需要一个支持附件和 SSL 连接的库。有哪些可用选项。我不打算实现我自己的 :) 问
HTML 电子邮件 - 按钮作为电子邮件中的表单
想知道是否可以在 HTML 电子邮件中包含一个表单。我要做的就是将图像输入提交到 Paypal 购买页面。我希望它直接进入 Paypal ，而无需先进入营销页面... 我会拥有 paypal 要求的完
HTML 电子邮件 - 不能限制宽度
我负责“ reshape ”我们的 IT 部门通信。我想用纯 HTML/CSS 来发送我们的电子邮件通知，以确保它的可移植性。下面是代码，它在 Outlook 中看起来完全符合我的要求，但是一旦将内
HTML 电子邮件，导航显示在移动设备的底部
我正在学习编写响应式电子邮件模板。目前我有:https://jsfiddle.net/q12yg2z6/

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - html 电子邮件中的布局