1
私はうまく表示されているWebバージョンがあります。テスト電子メールを送信すると、画像間に不必要な間隔が表示されます。私は、パディングと余白を変更しようとしましたが、何も動作していません。なぜそれをやっているのですか？ 電子メールのスペース
https://jsfiddle.net/tantalizea/r49oqbjj/
CSS：
a,
body,
div,
img,
span,
table,
td,
tr {
margin: 0;
padding: 0;
border: 0;
}
a {
color: #231F20;
font-weight: bold;
text-decoration: none
}
a[href^="x-apple-data-detectors:"] {
color: inherit;
text-decoration: inherit;
}
area {
outline: none
}
body {
font: normal 100% Arial, Helvetica, sans-serif;
background: #FFF;
color: #231F20
}
img {
border: none;
width: 100%;
height: auto
}
.container {
width: 600px;
margin: 0 auto;
max-width: 600px
}
#preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: #FFFFFF;
color: transparent;
height: 0;
width: 0;
font-size: 0px
}
.desktop {
display: table !important;
margin: 0 auto !important;
}
tr.desktop {
display: table-row !important
}
td.desktop {
display: table-cell !important
}
img.desktop {
display: inline !important
}
.mobile {
display: none !important
}
.break {
display: inline !important
}
@media screen and (max-width: 600px) {
.container {
width: 97.5%
}
.desktop,
tr.desktop,
td.desktop,
img.desktop {
display: none !important
}
.mobile {
display: table !important
}
tr.mobile {
display: table-row !important
}
td.mobile2 {
display: table !important;
width: 100%;
text-align: center !important
}
td.mobile {
display: table-cell !important
}
.break {
display: none !important
}
.hidden {
display: none !important
}
.no-border {
border: none !important
}
.smaller {
font-size: 200% !important
}
.smaller2 {
font-size: 100% !important
}
.center {
text-align: center !important
}
.margin {
margin: 0 auto
}
.image {
width: 100px !important
}
.width-100 {
width: 100% !important
}
}
HTML：
<body style="background:#FFF; color:#858585">
<div id="preheader" style="display:none; visibility:hidden; opacity:0; color:#878787; color:transparent; height:0; width:0; font-size:0px;">Tuesday, March 7, 2017 | 9840 International Drive, Orlando, Florida | Booth #613</div>
<!-- /div#preheader -->
<div class="container" style="margin:0 auto; max-width:600px">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="container" style="margin:0 auto; max-width:600px">
<tr class="bronto">
<td height="20"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Is this email not displaying correctly? <a href="%%!message_url%%" style="font:bold 100%/6mm Helvetica, Arial, sans-serif; color:#858585; text-decoration:none">Try the web version</a>.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td height="20"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td width="35" class="desktop"> </td>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="bottom" width="76%"><span style="font:normal 300% Times, 'Times New Roman', serif; color:#56565a; line-height:100%" class="smaller"><strong><em>You're Invited!</em></strong></span></td>
<td style="text-align:right" width="24%"><img src="http://www.kravetcontract.com/email_blasts/tipin.png" alt="KK" style="max-width:144px; width:100%" /></td>
</tr>
</table>
</td>
<td width="35" class="desktop"> </td>
</tr>
<!--<tr class="mobile">
<td class="mobile">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%" class="mobile">
<tr class="mobile">
<td height="20" class="mobile"></td>
</tr>
<tr class="mobile">
<td align="center" class="mobile"><span style="font:normal 200% Times, 'Times New Roman', serif; color:#57565b;" class="mobile"><strong><em>You're Invited!</em></strong></span></td>
</tr>
</table>
</td>
</tr>-->
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/top.jpg" alt="Top" style="max-width:600px" /></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/left.jpg" alt="Left" style="max-width:78px" /></td>
<td align="center" valign="middle" bgcolor="#FFFFFF">
<table cellpadding="0" cellspacing="20" align="center" border="0" width="100%">
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1px">PLEASE JOIN</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/BDNY2016/logo.png" alt="kravetcontract" style="max-width:280px" /></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">AT THIS YEAR'S</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/newh_logo_2.png" alt="NEWH" style="max-width:192px" /></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011;letter-spacing:1.5px">MARCH 7, 2017 AT 12PM-6PM<br />
BOOTH #613</span></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 81.25% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">9840 International Drive<br />
Orlando, Florida</span></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; line-height:21px; letter-spacing:1.5px">We look forward to seeing you.</span></td>
</tr>
</table>
</td>
<td align="right" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/right.jpg" alt="Right" style="max-width:78px" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px" /></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#56565a">
<table cellpadding="0" cellspacing="5" align="center" border="0">
<tr>
<td bgcolor="#56565a"><a href="https://www.google.com/maps/place/9840+International+Dr,+Orlando,+FL+32819/@28.4234728,-81.4662839,17z/data=!3m1!4b1!4m5!3m4!1s0x88e77e36c55bc137:0xf5a03296c84a146e!8m2!3d28.4234728!4d-81.4640952?utm_source=directions&utm_medium=email&utm_content=textlink&utm_campaign=newh-2017" style="font:normal 75% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#FFFFFF; background:#56565a; line-height:21px; padding:5px;letter-spacing:1.5px">GET DIRECTIONS <strong style="font-family:Arial, sans-serif;">►</strong></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td><img src="http://www.kravet.com/style-spotlight/one-family.gif" alt="One Family. Ninety-Eight Years." border="0" style="border:none; width:100%" /></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 150% Helvetica, Arial, sans-serif; color:#858585"><span style="font:normal 87.5%/4mm Helvetica, Arial, sans-serif; color:#858585">@</span>kravetinc</span>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
<td>
<a href="http://www.instagram.com/kravetinc?utm_source=instagram&utm_medium=email&utm_content=imagelink&utm_campaign=newh-2017"><img src="http://www.kravet.com/style-spotlight/instagram.gif" alt="Instagram" border="0" style="border:none; width:100%; max-width:50px" /></a>
</td>
<td width="10"> </td>
<td>
<a href="http://www.facebook.com/kravetinc?utm_source=facebook&utm_medium=email&utm_content=imagelink&utm_campaign=newh-2017"><img src="http://www.kravet.com/style-spotlight/facebook.gif" alt="Facebook" border="0" style="border:none; width:100%; max-width:50px" /></a>
</td>
<td width="10"> </td>
<td>
<a href="http://www.pinterest.com/kravet?utm_source=pinterest&utm_medium=email&utm_content=imagelink&utm_campaign=newh-2017"><img src="http://www.kravet.com/style-spotlight/pinterest.gif" alt="Pinterest" border="0" style="border:none; width:100%; max-width:50px" /></a>
</td>
<td width="10"> </td>
<td>
<a href="http://www.twitter.com/kravet?utm_source=twitter&utm_medium=email&utm_content=imagelink&utm_campaign=newh-2017"><img src="http://www.kravet.com/style-spotlight/twitter.gif" alt="Twitter" border="0" style="border:none; width:100%; max-width:50px" /></a>
</td>
<td width="10"> </td>
<td>
<a href="http://www.houzz.com/pro/kravet/kravet?utm_source=houzz&utm_medium=email&utm_content=imagelink&utm_campaign=newh-2017"><img src="http://www.kravet.com/style-spotlight/houzz.gif" alt="Houzz" border="0" style="border:none; width:100%; max-width:50px" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center"><a href="http://www.e-designtrade.com?utm_source=edesigntrade&utm_medium=email&utm_content=textlink&utm_campaign=newh-2017" style="font:normal 112.5% Helvetica, Arial, sans-serif; color:#858585">e-designtrade.com</a></td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 75% Helvetica, Arial, sans-serif; color:#858585"><a href="http://www.kravetcontract.com?utm_source=kravetwebsite&utm_medium=email&utm_content=textlink&utm_campaign=newh-2017" style="font:bold 100% Helvetica, Arial, sans-serif; color:#858585">KRAVET® INC</a> | <a href="http://www.kravet.com/services/contact?utm_source=contact&utm_medium=email&utm_content=textlink&utm_campaign=newh-2017" style="font:bold 100% Helvetica, Arial, sans-serif; color:#858585">CONTACT US</a> | <a href="http://www.kravet.com/about%20us/privacy%20policy?utm_source=privacy&utm_medium=email&utm_content=textlink&utm_campaign=newh-2017" style="font:bold 100% Helvetica, Arial, sans-serif; color:#858585">PRIVACY POLICY</a></span></td>
</tr>
<tr>
<td align="center"><span style="font:bold 75% Helvetica, Arial, sans-serif; color:#858585">Exclusively Available Through Interior Designers</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">This email was sent to %%!contact_email%% by %%!account_organization%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">%%!account_address1%% | %%!account_city%%, %%!account_state%% %%!account_zip%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585"><a href="%%!forward_url%%" style="font:normal 100% Helvetica, Arial, sans-serif; color:#858585; text-decoration:underline">Forward to a friend</a> | <a href="%%!manage_url%%" style="font:normal 100% Helvetica, Arial, sans-serif; color:#858585; text-decoration:underline">Manage Preferences</a> | <a href="%%!unsubscribe_url%%" style="font:normal 100% Helvetica, Arial, sans-serif; color:#858585; text-decoration:underline">Unsubscribe</a></span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
</table>
<!-- /table.container -->
</div>
<!-- /div.container -->
</body>
メールを送信したときの見え方の画像を追加することもできます。トラブルシューティングに役立つためには、もう少しコンテキストが必要になるかもしれません。 – matt
画像が追加されました。まるでそれが1つのイメージであるかのように見えるべきです。 – Tantalizea