覆盖 Outlook 中电子邮件标题图像周围的默认边距/填充答案

【问题标题】：Override default margins/padding around email header images in Outlook覆盖 Outlook 中电子邮件标题图像周围的默认边距/填充
【发布时间】：2018-01-16 23:11:48
【问题描述】：

我正在编写一封电子邮件，但主角图像略微未对齐，并且仅在 Outlook 中。

我已经看到并尝试了这个问题的一些答案（将字体大小设置为 0，删除“边距”，为图像添加另一个表格），但所有答案都是几年前的。我认为 Outlook 中有一个新的更新导致了这个问题。

我的代码在这里：

    <!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" />  
<!--[if !mso]><!-->  
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title></title>  
<!--[if (gte mso 9)|(IE)]>  
    <style type="text/css">  
    table {border-collapse: collapse !important;}
}
</style>
<![endif]-->
</head>  
<body style="background-color:#eeeeee; Margin:0; padding:0; min-width:100%;">
<style type="text/css">
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}  

*[class=mobile]{display:none;}

@media only screen and (max-width:650px) {   
*[class=desktop]{display:none !important;  
    background:none!important;}  
}

@media only screen and (max-width: 649px) {
 *[class="column"],
 *[class="two-column"] {
         width: 100%!important;
        max-width: 649px!important;
 }
*[class="rightrail"] {
    max-width: 100%!important;
}
*[class="rightrail"] img {
    width: 100%!important;
}
   *[class="nomobile"] {
        overflow: hidden !important;
 float: none !important;
 display: none !important;
 line-height:0% !important;  
}
}
@media only screen and (max-width: 500px) {
  [class*=wrapper] .app {
     width: 70%!important;
  }  
      [class*=wrapper] .app-text span {
     font-size:15px!important;
     font-weight:bold;
  }
      [class*=wrapper] .app-text span span {
 font-size:7px!important;
 font-weight:bold;
  }

    *[class=desktop]{
            display:block!important;
            font-size: 14px!important; 
            max-height: 100%!important; 
            line-height: 20px!important; 
            text-align: center;!Important;
        }
    div[class=desktop]{
            display:block!important;
            font-size: 14px!important; 
            max-height: 100%!important; 
            line-height: 20px!important; 
            margin: 0 auto!important;
            text-align:center!important;
        }
   *[class="mobileonly"] {
        overflow: visible !important;
 float: none !important;
 display: block !important;
 line-height:100% !important;  
}
    *[class=desktop] table {
            display: inline-block!important;
        font-size: 14px!important;
        max-height: 100%!important;
        line-height: 20px!important;
        width: 100%!important;
        text-align: center!Important;
        margin: 0 auto;
        max-width: 140px!important;    
        }
   *[class="padding"] {
 padding: 0 5% !important;  
}
    *[class=desktop] a {
            display:block!important;
            font-size: 14px!important; 
            max-height: 100%!important; 
            line-height: 20px!important; 
            padding: 8px 20px!important;
        }
    *[class="column"],
     *[class="two-column"] {
         width: 90%!important;
 }

    }

</style>
        <center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; background-color: #eeeeee">  
    <br class="nomobile">
    <!--Pre Header-->
    <div class="header" style="max-width:650px;"> 
      <!--[if (gte mso 9)|(IE)]>
        <table width="650" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
            <tr>
            <td style="padding:0;">
    <![endif]-->
      <table border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto; width:100%; max-width:650px;">
    <tr>
      <td style="width: 100%; text-align:center; font-size:0;"><!--[if (gte mso 9)|(IE)]>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;">
                    <tr>
                        <td width="25">&nbsp;</td>
                        <td width="600" valign="top">
            <![endif]--> 
         <!--[if !(gte mso 9)|(IE)]>
                <div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;">&nbsp;</div>
               <![endif]--> 

        <!--[if !(gte mso 9)|(IE)]>
                <div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;">&nbsp;</div>
               <![endif]--> 
    <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="25">&nbsp;</td></tr></table>
                    <![endif]--></td>
    </tr>
  </table>
</div>

<!--Header-->
<div class="header" style="max-width:650px;"> 
  <!--[if (gte mso 9)|(IE)]>
            <table width="650" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
                <tr>
                <td style="padding:0;">
       <![endif]-->
  <table border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto; width:100%; max-width:650px; background-color: #0079c2;">
    <tr>
      <td style="width: 100%; text-align:center; font-size:0;"><!--[if (gte mso 9)|(IE)]>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;">
                        <tr>
                            <td width="25">&nbsp;</td>
                            <td width="600" valign="top">
                <![endif]--> 
        <!--[if !(gte mso 9)|(IE)]>
                    <div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;">&nbsp;</div>
               <![endif]-->

        <div style="width:90%; display:inline-block; vertical-align:top;">
          <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;" >
             <tr>
              <td width="100%" class="inner"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0; padding: 0; margin: 0" >
                  <tr>
                    <td width="100%" class="inner"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0; padding: 0; margin: 0" >
                        <tr>
                          <td width="30%" align="left"><a href="https://www.bcbst.com/"><img src="http://image.bcbst-email.com/lib/fe9612717c60077f75/m/1/logo-white_2.png" alt="BlueCross BlueShield of Tn" width="134" height="55" border="0" style="display: block; max-width: 134px; color: #ffffff; background: #0079C2; font-size:9px;"/></a></td>
                          <td width="55%" align="right"><p style="font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color:#ffffff; mso-line-height-rule:exactly; line-height: 12px;"><a href="%%view_email_url%%" style="color: #ffffff; text-decoration:none;">View Online</a></p></td>
                        </tr>
                      </table></td>
                  </tr>
                </table></td>
            </tr>
          </table>
        </div>

        <!--[if !(gte mso 9)|(IE)]>
                    <div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;">&nbsp;</div>
                   <![endif]--> 
        <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="25">&nbsp;</td></tr></table>
                    <![endif]--></td>
    </tr>
  </table>
</div>
<!--Header--> 

<!--Hero Image-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing: 0; width: 100%; max-width:650px!important; padding: 0 auto;">
  <tr>
    <td><img src="http://image.bcbst-email.com/lib/fe9612717c60077f75/m/1/Health+Foundation+Header+V2.jpg" style="width:100%; display:block; max-width: 650; color: #0079C2; font-weight:bold; background: #ffffff; font-size:14px;" alt="A New Focus for our Health Foundation" border="0" width="100%" class="hero"></td>
  </tr>
</table>
<!--Hero Image-->

【问题讨论】：

标签： html css email outlook margin

【解决方案1】：

我有这个 CSS 备忘单，它将重置不同电子邮件提供商的大部分样式，将其添加到您的任何样式之前

/* Client-specific Styles */

#outlook a {
padding: 0;
}
/* Force Outlook to obtain a "view in browser" menu link. */

body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */

.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing.*/

#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}

img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}

a img {
border: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}

.image_fix {
display: block;
}

p {
margin: 0px 0px !important;
}

table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}

table td {
border-collapse: collapse;
}

.removemobile {
display: none;
}
/*STYLES*/
/*################################################*/
/*IPAD STYLES*/
/*################################################*/

@media only screen and (max-width: 612px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #ffffff;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
td[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
table[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
td[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
table[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="logo"] {
width: 100%!important;
float: left;
text-align: center;
margin-bottom: 20px;
}
td[class="menu"] {
width: 100%!important;
float: left;
}
table[class=fullspread] {
width: 100%!important;
clear: both;
}
table[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="buttoncenter"] {
float: none!important;
text-align: center!important;
display: inline-block!important;
clear: both;
}
img[class="imageinline"] {
display: inline!important;
}
img[class="fullwidth"] {
display: inline!important;
width: 100%!important;
}
td[class="paddingtop"] {
padding-top: 15px!important;
}
.buttonleft {
display: inherit!important;
}
.removemobile {
width: 100%!important;
display: block;
}
table[class="halfwidth"] {
width: 50%!important;
}
table[class="mghide"] {
display: none!important;
}
td[class="mghide"] {
display: none!important;
}
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/

@media only screen and (max-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #ffffff;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
td[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
table[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
td[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
table[class=fullspread] {
width: 100%!important;
clear: both;
}
table[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
table[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="logo"] {
width: 100%!important;
float: left;
text-align: center;
margin-bottom: 20px;
}
td[class="menu"] {
width: 100%!important;
float: left;
}
td[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="buttoncenter"] {
float: none!important;
text-align: center!important;
display: inline-block!important;
clear: both;
}
img[class="imageinline"] {
display: inline!important;
}
img[class="fullwidth"] {
display: inline!important;
width: 100%!important;
}
td[class="paddingtop"] {
padding-top: 15px!important;
}
.buttonleft {
display: inherit!important;
}
.removemobile {
width: 100%!important;
display: block;
}
table[class="halfwidth"] {
width: 50%!important;
}
table[class="mghide"] {
display: none!important;
}
td[class="mghide"] {
display: none!important;
}
}
</style>

【讨论】：

这是一个非常方便的工具，我肯定会使用它，但我已经尝试了 padding:0 解决方案，但它并没有解决我的问题......
您的 HTML 中有视口元数据吗？您也可以全局重置以防万一*, * *{padding: 0; margin: 0, box-sizing: border-box}