为什么我的显示在 html 和时事通讯之间变化？

Question

我是时事通讯的初学者。所以我有显示问题。在我的 Dreamweaver 代码中，显示是正确的。但是一旦我在 Gmail 上发送它，例如我在 span

之间有一个自然的填充

我已经设置了 padding 和 margin 来解决这个问题，但没有任何效果。只有点镜子的link.

才显示正确

你能解释一下为什么吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="format-detection" content="telephone=yes">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title>BLACK FRIDAY AUX CERCLES DE LA FORME</title>
<style type="text/css">
* {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
 @import url('https://fonts.googleapis.com/css?family=Anton');
.fab {
 color: #e52121;
 margin: 0 5px;
 font-family: "Font Awesome 5 Brands";
}
body {
 -webkit-print-color-adjust: exact;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}
/*.row { margin: 0 auto; }*/
.white {
 color: #ffffff !important;
}
.white a {
 color: #ffffff !important;
}
td {
 font-family: Arial, Helvetica, sans-serif;
}
a:hover {
 color: #000000;
}
a:visited {
 color: #000000;
}
a[x-apple-data-detectors] {
 color: inherit !important;
 text-decoration: none !important;
 font-size: inherit !important;
 font-family: inherit !important;
 font-weight: inherit !important;
 line-height: inherit !important;
}
</style>
<style media="print" type="text/css">
a[x-apple-data-detectors] {
 color: inherit !important;
 text-decoration: none !important;
 font-size: inherit !important;
 font-family: inherit !important;
 font-weight: inherit !important;
 line-height: inherit !important;
}
h3 {
 margin: 0;
}
/*table responsive */
 
/* Table Base */

.table {
 width: 100%;
}
.table th, .table td {
 font-weight: normal;
 font-size: 12px;
 /*padding: 8px 15px;*/
 line-height: 20px;
 vertical-align: middle;/*border-top: 1px solid #dddddd;*/
}
.table thead th {
 background: #eeeeee;
 vertical-align: bottom;
}
.table tbody > tr:nth-child(odd) > td, .table tbody > tr:nth-child(odd) > th {
 background-color: #fafafa;
}
.table .t-small {
 width: 5%;
}
.table .t-medium {
 width: 15%;
}
.table .t-status {
 font-weight: bold;
}
.table .t-active {
 color: #46a546;
}
.table .t-inactive {
 color: #e00300;
}
.table .t-draft {
 color: #f89406;
}
.table .t-scheduled {
 color: #049cdb;
}
span {
 margin: 0;
 font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

/* Small Sizes */
@media (max-width: 480px) {
.table-action thead {
 display: none;
}
.table-action tr {
 border-bottom: 0.8px solid #dddddd;
}
.table-action td {
 border: 0;
}
.table-action td:not(:first-child) {
 display: block;
}
}
</style>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body  style="margin: 0; padding: 0;" bgcolor="#e0e0e0">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#e0e0e0" style="margin-top: 20px;">
  <tbody>
    <tr>
      <td width="600" align="center"><!-- Visually Hidden Preheader Text : BEGIN -->
        
        <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Jusqu'au 30 novembre 2018 1 mois suppl&eacute;mentaire aux Cercles de la Forme à l'occasion du Black Friday. </div>
        
        <!-- Visually Hidden Preheader Text : END -->
        
        <div class="edit" style="position: relative;">
          <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center" style="padding: 15px;">
            <tbody>
              <tr>
                <td style="width: 50%" align="center"><a href="https://www.cerclesdelaforme.com/" target="_blank"><img src="http://img.mailinblue.com/2107629/images/5be3fa386d31f_1541667384.png" style="display: block;" alt="cdf" class="fullWidth" width="243" height="auto" border="0"></a></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="edit" style="position: relative;">
          <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center">
            <tbody>
              <tr height="100">
                <td align="center"><img src="http://img.mailinblue.com/2107629/images/5bed56bbef5ff_1542280891.jpg" alt="bf"/></td>
              </tr>
            </tbody>
          </table>
        </div>
        <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818">
          <tbody>
            <tr>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td align="center"><span style="color: #ffff00;font-size: 3rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 MOIS DE SPORT</span></td>
            </tr>
            <tr>
              <td align="center"><span style="color: #ffff00;font-size: 4rem;font-weight: bolder;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">OFFERT</span></td>
            </tr>
            <tr>
              <td align="center"><span style="color: #ffff00;font-size: 1.8rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 an = 13 mois</span></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td align="center" style="padding:0 40px"><p> <span style="color: whitesmoke;font-size: 1rem;font-weight: bold;">Pour toute contremarque valid&eacute;e à l'accueil d'un de nos clubs sur pr&eacute;sentation de cet email, <span style="color: #ffff00;">jusqu'au 30 novembre 2018.</span> </span> </p></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><!-- TABLE -->
                
                <table width="600" style="font-size: 13px;padding: 0px;">
                  <tbody>
                    <tr align="center">
                      <td>&nbsp;</td>
                      <td style="font-size: 15px;font-weight: bold;text-transform: uppercase;" align="center"><span style="background-color: #ffff00;padding: 10px;"><a href="https://www.cerclesdelaforme.com/clubs-de-sport-fitness/" style="color: #181818; font-family:Arial, Helvetica, sans-serif; text-decoration:none; text-align:center;color:black;">VOIR NOS CLUBS</a></span></td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                    </tr>
                  </tbody>
                </table>
                
                <!-- END TABLE --></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
        <div class="edit" style="position: relative;">
          <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
            <tbody>
              <tr>
                <td><table class="fullWidth" width="562" cellspacing="0" cellpadding="0" border="0" align="center">
                    <tbody>
                      <tr>
                        <td align="center" style="line-height: 15px;font-size: 14px;padding: 10px;" height="15"><strong>2800</strong> cours par semaine - <strong>90</strong> activit&eacute;s - <strong>27</strong> clubs à Paris - <strong style="color: #E21518;">Premier r&eacute;seau parisien </strong></td>
                      </tr>
                    </tbody>
                  </table></td>
              </tr>
              <tr>
                <td><div style="padding:20px;font-family:Arial;font-size:18px;line-height:1;text-align:center;"><a href="https://www.facebook.com/cerclesdelaforme/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-facebook-f fa-2x"></em></a> <a href="https://twitter.com/cerclesdelaform"><em class="fab fa-twitter fa-2x"></em></a> <a href="https://www.youtube.com/user/CerclesdelaformeTV/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-youtube fa-2x"></em></a> <a href="https://www.pinterest.fr/cerclesdelaform/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-pinterest-p fa-2x"></em></a> <a href="https://www.instagram.com/cerclesdelaforme/"><em class="fab fa-instagram fa-2x"></em></a></div></td>
              </tr>
            </tbody>
          </table>
        </div></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Answer 1

简短的回答是每个电子邮件客户端的行为都不同，none 与 CSS 一样功能齐全，就像网络浏览器一样，每个都支持不同数量的 css-样式。有一个非常全面的样式列表，browsers/versions 支持 Campaign Monitor's Ultimate Guide to CSS。

如何解决这些问题的答案非常复杂。每个客户端的每个版本都会有一长串提示和技巧，以使其更好地工作，这可能会破坏您在其他客户端中的 CSS。例如，这里只是如何使用 outlook 的几个方面：

https://www.emailonacid.com/blog/article/email-development/how-to-create-excellent-emails-for-outlook-com/

https://group-mail.com/html-email/tips-to-create-html-email-that-works-with-all-email-clients-part-1/

https://templates.mailchimp.com/development/css/outlook-conditional-css/

查看您的电子邮件在多个浏览器中的表现的最佳方式是使用像 Litmus which has a trial period so you can compare it to free options like mjml.io

这样的服务

为什么我的显示在 html 和时事通讯之间变化？

why my display change between html and newsletter?

html

css

newsletter