我希望有人能帮助我。我正在用 Mautic 编写一封电子邮件，它几乎完成了，但我遇到的主要问题是：两个图像或图像和文本之间是一个空格，我不知道如何删除它。您可以在此处查看整个电子邮件代码。我会很感激任何建议如何解决这个问题并有一个好看的电子邮件。
/* Take care of image borders and formatting */
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding:0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width:100%;
}
.backgroundTable {
margin:0 auto;
padding:0;
width:100% !important;
}
table td {
border-collapse: collapse;
}
.ExternalClass * {
line-height: 115%;
}
/* General styling */
td {
font-family: Arial, sans-serif;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%;
height: 100%;
color: #000000;
font-weight: 400;
font-size: 18px;
}
h1, h2, h3, h4 {
text-align: center;
}
a {
color: #e86047;
text-decoration: none;
}
.force-full-width {
width: 100% !important;
}
.body-padding {
padding: 0 75px;
}
</style>
<style type="text/css" media="screen">
@media screen {
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,900);
/* Thanks Outlook 2013! */
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', 'sans-serif' !important;
}
.w280 {
width: 280px !important;
}
}
</style>
<style type="text/css" media="only screen and (max-width: 480px)">
/* Mobile styles */
@media only screen and (max-width: 480px) {
table[class*="w320"] {
width: 320px !important;
}
td[class*="w320"] {
width: 280px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
img[class*="w320"] {
width: 250px !important;
height: 67px !important;
}
td[class*="mobile-spacing"] {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
*[class*="mobile-hide"] {
display: none !important;
}
*[class*="mobile-br"] {
font-size: 12px !important;
}
td[class*="mobile-w20"] {
width: 20px !important;
}
img[class*="mobile-w20"] {
width: 20px !important;
}
td[class*="mobile-center"] {
text-align: center !important;
}
table[class*="w100p"] {
width: 100% !important;
}
td[class*="activate-now"] {
padding-right: 0 !important;
padding-top: 20px !important;
}
[class="mobile-block"] {
width: 100% !important;
display: block !important;
}
}<!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" class=" responsejs " style="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{subject}
</title>
</head>
<body offset="0" class="body ui-sortable" style="padding: 0px; margin: 0px; display: block; background: rgb(238, 235, 235); text-size-adjust: none; -webkit-font-smoothing: antialiased; width: 100%; height: 100%; color: #000000; font-weight: 400; font-size: 18px; cursor: auto; overflow: visible;" bgcolor="#eeebeb">
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0 auto;border-collapse: collapse !important;width: 600px;" class="w320" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px; padding-top: 10px;" data-param-padding-bottom="0" data-param-padding-top="10">
<img src="https://marketingheroes.cz/mautic/media/images/9b5eae91041367cd39287b92bdb3d3e9.png" alt="An image" class="fr-view" style="" width="600" height="38.8594" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0px auto; width: 600px; border-collapse: collapse !important; background-color: rgb(0, 124, 220);" class="w320" cellpadding="0" cellspacing="0" width="600" bgcolor="#007cdc">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" data-param-caption-color="129ac7" data-param-align="1" data-param-text-align="1" style="text-align: center; position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" class="" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/388aa6e28fba0481dad8773fc042558a.png" alt="An image" class="fr-view" style="width: 518px; height: 291.375px;" width="518" height="291.375" />
<div style="clear:both">
</div>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; text-align: center;" data-param-align="1" data-param-text-align="1">
<img src="https://marketingheroes.cz/mautic/media/images/242f21a049c560ab1395166265f0c254.png" alt="An image" class="fr-view" style="width: 480px; height: 52px; display: inline-block; vertical-align: bottom; margin-right: 5px; margin-left: 5px; max-width: calc(100% - 10px);" width="480" height="52" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="" style="padding-top: 10px; position: relative; left: 0px; top: 0px; padding-bottom: 0px;" class="" data-param-padding-bottom="">
<h1>
...pĹ™iletĂ kdykoliv budete v nesnázĂch se svĂ˝m marketingem na sociálnĂch sĂtĂch!
</h1>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0px auto; width: 600px; border-collapse: collapse !important; background-color: rgb(255, 255, 255);" class="w320" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" data-param-background-color="ffffff" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; text-align: center; padding-bottom: 0px;" data-param-padding-top="0" data-param-text-align="1" data-param-align="1" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/678d01285b77fb587bdb653e5ebcd9d2.png" alt="An image" class="fr-view" style="width: 630px; height: 144.359px;" width="630" height="144.359" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="25" style="padding-top: 25px; padding-bottom: 2px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<h2>1. NeumĂte si spravovat sociálnĂ sĂtÄ› a vĂ˝konnostnĂ reklamu?
</h2>
<h3>NevadĂ! Ukážeme vám, co teÄŹ na sociálnĂch sĂtĂch “letĂ” a nenecháme Vám to uletÄ›t...
</h3>
<h4>
<b>Domluvte si online konzultaci ZDARMA >>>
</b>
</h4>
</div>
<div data-slot="image" data-param-align="1" data-param-text-align="1" style="text-align: center; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<img src="https://marketingheroes.cz/mautic/media/images/491683509f0d67fda7fb2c1c13294381.gif" alt="An image" class="fr-view" style="" width="500" height="270" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="25" style="padding-top: 25px; padding-bottom: 2px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<h2>2. SociálnĂ sĂtÄ› vám jiĹľ spravuje agentura, ale chcete to levnÄ›ji nebo s lepšĂm obsahem a vĂ˝sledky?
</h2>
<h3>Korona Vánoce 2020 jsou za rohem a VY chcete bĂ˝t vidÄ›t! VystĹ™elte s námi ke hvÄ›zdám nebo upadnÄ›te v zapomnÄ›nĂ...
</h3>
<h4>Chceme se připravit na Vánoce 2020
</h4>
</div>
<div data-slot="image" data-param-align="1" data-param-text-align="1" style="text-align: center; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<img src="https://marketingheroes.cz/mautic/media/images/8b62f9bfeb9fe97ba57cc9c7f4207294.gif" alt="An image" class="fr-view" style="" width="500" height="270" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="25" style="padding-top: 25px; padding-bottom: 2px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<h2>3. Máte skvÄ›lĂ˝ produkt, ale neumĂte ho “prodat” na sociálnĂch sĂtĂch?Â
</h2>
<h3>Ukažme ten vzácný poklad, který schováváte ve skladu světu…
<br />“A brzy budete hodně někde!” - Jolanda
</h3>
<h4>Chceme zaujmout a udrĹľet si #novĂ© zákaznĂky
</h4>
</div>
<div data-slot="image" data-param-align="1" data-param-text-align="1" style="text-align: center; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<img src="https://marketingheroes.cz/mautic/media/images/f0d774b5c8e6e5266520a3a9da2b5106.gif" alt="An image" class="fr-view" style="" width="500" height="270" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px;">
<h2>PojÄŹme se do toho spoleÄŤnÄ› zakousnout!
</h2>
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px;">
<div style="text-align: center;">„Bez strategie jsou sociálnĂ sĂtÄ› bezedná studna na penĂze… S tou správnou se stanou vašĂm zlatĂ˝m dolem!“
</div>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px; padding-top: 25px;" data-param-padding-bottom="0" data-param-padding-top="25">
<img src="https://marketingheroes.cz/mautic/media/images/aea055b371bb7e76cc1c7a54ef5e9236.png" alt="An image" class="fr-view" style="width: 625px; height: 141.875px;" width="625" height="141.875" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0 auto;border-collapse: collapse !important;width: 600px;" class="w320" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable" style="padding-top: 0px; padding-bottom: 0px;">
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/b3dc602ff2dc0093a218d69e6302d700.png" alt="An image" class="fr-view" style="" width="600" height="39.0625" />
<div style="clear:both">
</div>
</div>
<div data-slot="image" data-param-padding-bottom="0" style="padding-bottom: 0px; padding-top: 25px;" data-param-padding-top="25">
<img src="https://marketingheroes.cz/mautic/media/images/7c9dcd22c754b6c9352d5350fa34dfe4.png" alt="An image" class="fr-view" style="" width="600" height="38.8594" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0px auto; width: 600px; border-collapse: collapse !important; background-color: rgb(0, 124, 220);" class="w320" cellpadding="0" cellspacing="0" width="600" bgcolor="#007cdc">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" data-param-padding-top="0" data-param-padding-bottom="0">
<h2>
<b>SkonÄŤete s tou nudou
<br />a začněte to s marketingovým HRDINOU!
</b>
</h2>
</div>
<div data-slot="button" class="" data-param-float="1" align="center" style="position: relative; left: 0px; top: 0px;" data-param-background-color="2ecb71" data-param-link-text="PodĂvejte se, co dÄ›láme jinak?" data-param-button-size="0">
<a href="#" class="button" target="_blank" style="border-color: rgb(46, 203, 113); border-width: 10px 20px; border-style: solid; text-decoration: none; border-radius: 3px; background-color: rgb(46, 203, 113); display: inline-block; font-size: 14px; color: rgb(255, 255, 255); padding: 0px;" background="#2ecb71">PodĂvejte se, co dÄ›láme jinak?
</a>
<div style="clear:both">
</div>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; text-align: center; padding-top: 0px; padding-bottom: 0px;" data-param-align="1" data-param-text-align="1" data-param-background-color="007cdc" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/31a746de9d24870a515b695106eca718.png" alt="An image" class="fr-view" style="width: 633px; height: 600px;" width="633" height="600" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<center>
<table data-section="1" cellspacing="0" cellpadding="0" width="600" class="w320" bgcolor="#ffffff" style="background-color: rgb(255, 255, 255); border-collapse: collapse !important;">
<tbody>
<tr>
<td style="font-family: Arial, sans-serif;border-collapse: collapse;">
<table cellspacing="0" cellpadding="0" class="force-full-width" style="border-collapse: collapse !important;width: 100% !important;">
<tbody>
<tr>
<td data-slot-container="1" style="text-align: center;font-family: Arial, sans-serif;border-collapse: collapse;" class="ui-sortable">
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" data-param-background-color="ffffff" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/b5bd5c6bd42ece031ebeab79b8d8a7b6.png" alt="An image" class="fr-view" style="width: 627px; height: 144.375px;" width="627" height="144.375" />
<div style="clear:both">
</div>
</div>
<div data-slot="text">
<br />
<br />
<img width="62" height="56" img="" src="https://www.marketingheroes.cz/mautic/themes/sunday/img/gplus.gif" style="max-width: 600px;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" />
<img width="68" height="56" src="https://www.marketingheroes.cz/mautic/themes/sunday/img/facebook.gif" style="max-width: 600px;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" />
<img width="61" height="56" src="https://www.marketingheroes.cz/mautic/themes/sunday/img/twitter.gif" style="max-width: 600px;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" />
<br />
<br />
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px;">
<h3>Chcete vÄ›dÄ›t vĂce... Neváhejte napsat na > <a href="#">chceme@marketingheroes.cz</a> nebo si nás najdÄ›te na:
<br />NovĂ© sady 988/2, 602 00 BrnoÂ
</h3>
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px;" data-param-padding-bottom="0">
<a href="{webview_url}">View in browser
</a> |
<a href="{unsubscribe_url}">Unsubscribe
</a>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px; padding-top: 25px;" data-param-padding-bottom="0" data-param-padding-top="25">
<img src="https://marketingheroes.cz/mautic/media/images/f0767d753e853646327c8a1331953ce9.png" alt="An image" class="fr-view" style="" width="600" height="141.875" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0 auto;border-collapse: collapse !important;width: 600px;" class="w320" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" data-param-padding-top="0" data-param-padding-bottom="0" style="padding-top: 0px; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" class="">
<img src="https://marketingheroes.cz/mautic/media/images/650aca3949de51ca4c276c92b8beef9e.png" alt="An image" class="fr-view" style="" width="600" height="39.0625" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
</body>
</html>