html - html 电子邮件中的布局

标签 html css

我使用了一个 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 - 为什么宽度为 :100% doesn't work in typahead input?

下一篇：ios - .class :hover . otherClass {...} - iOS Safari 不工作

相关文章：

css - youtube iframe 周围的 float 列

html - 在我的导航中将链接居中

jquery - 如何查找 LI 是否有 child UL

javascript - IE 8 支持奇/偶斑马样式

javascript - 隐藏页面元素而不停用它们的事件

javascript - 将文本输入定位在文本区域的光标位置之上(javascript，文本区域自动完成)

html - CSS:自动调整高度

html - rtl 当最后一个词是英语时

html - 如何将内容对齐到 div 的所有四个 Angular (右上角、左上角、右下角、左下角)并在每个 Angular 上留边距？

asp.net - 最大化网站的并行下载

©2024 IT工具网  联系我们