Spare gap in html email in Outlook Windows 10
Question
Hy!
I am new at this and trying to write my first html email code. I have an issue with html inline email code exactly in Outlook and on Windows 10. It makes unnecessary gap between two td's starting with td containing the img and until the end. https://codepen.io/kribits/pen/jOOYNmv . Already tried some tips and tricks like changing to display: block; and separating those two td's with individual tags, but it doesn't helped. Really searching for some helpful answer. [The big gap][2]
Here is the code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style color: #EC6700;></style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<title>Mobilly signature</title>
<style>
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a {
color: #EC6700 !important;
}
</style>
<!-- <meta name="format-detection" content="telephone=no" /> -->
</head>
<body id="body">
<table>
<tbody height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"
style="box-sizing: border-box; border-collapse: collapse;">
<tr style="box-sizing: border-box; border-collapse: collapse;">
<td>
<span
style="font-family: 'Open Sans', sans-serif !important; font-size:14px; line-height:20px; margin: 0;">Ar
cieņu,</span>
<br>
<p style="font-family: 'Open Sans', sans-serif !important; font-size:14px; line-height:20px;">
<b>Vārds Uzvārds</b><br>Zīmola vadītājs<br>SIA Company<br>Address<br>
</p>
</td>
</tr>
<tr>
<td
style="display:inline-block; box-sizing:border-box; line-height:21px; font-family: 'Open Sans', sans-serif !important; font-size:14px; width:75px; height:75px;">
<img src="" alt="logo">
</td>
<td style="display: inline-block; width: 25px;"></td>
<td
style="display:inline-block; line-height:21px; font-family: 'Open Sans', sans-serif !important; font-size:14px; border-collapse: collapse; text-decoration: none !important;">
<div style="display:inline-block; color: #EC6700; "
><span
style="color: #EC6700; text-decoration:none !important;"> <a href="vards.uzvards@mobilly.lv" style="text-decoration:none;"> vards.uzvards@mobilly.lv</a></span><br>
<a
href="https://mobilly.lv/" target="blank" style="color: #EC6700; text-decoration:none;"><span
style="color: #EC6700; text-decoration:none;">www.mobilly.lv</span></a><br><span style="color: #EC6700; text-decoration:none !important;">
<a href="" style="color: #EC6700; text-decoration:none;">+371 66047706</a></span><br><a href="https://www.facebook.com/mobilly.lv/" target="blank"
style="color: #EC6700; text-decoration:none;"><span
style="color: #EC6700; text-decoration:none;">Facebook | </span></a><a
href="https://www.instagram.com/mobilly.lv/?hl=en" target="blank"
style="color: #EC6700; text-decoration:none;"><span
style="color: #EC6700; text-decoration:none;">Instagram | </span></a><a
href="https://twitter.com/mobilly?lang=en" target="blank"
style="color: #EC6700; text-decoration:none;"><span
style="color: #EC6700; text-decoration:none;">Twitter |</span></a><a
href="https://www.linkedin.com/company/mobillysia" target="blank"
style="color: #EC6700; text-decoration:none;"> <span
style="color: #EC6700; text-decoration:none;">LinkedIn</span></a>
</div>
</td>
</tr>
<tr>
<td>
<div>
<p> Šis e-pasta sūtījums, kā arī visi tam pievienotie dokumenti ir konfidenciāli un paredzēti vienīgi uzrādītajam adresātam. Sūtījuma satura neakceptēta izpaušana, izplatīšana vai izmainīšana ir aizliegta un var būt prettiesiska. Ja Jūs neesat šī sūtījuma adresāts, lūdzu, informējiet par to nosūtītāju un izdzēsiet sūtījumu no sistēmas.</p>
<p>
The information in this e-mail is confidential. It is intended solely for the addressee and access to the e-mail by anyone else is unauthorised. If you are not a named recipient, any disclosure, copying, reliance on it is prohibited and may be unlawful. If the notice is not intended for you, please notify the sender immediately and delete the e-mail.</p>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>```
[1]: https://i.stack.imgur.com/XTg3i.jpg
[2]: https://i.stack.imgur.com/1HwGf.jpg
2 answers
solution1
0 2020-03-11 23:08:42
Further to my comment, presuming you are getting the same result in Outlook as viewing the HTML output directly in the weblink, it's your paragraph <p> tags creating the gap and has nothing to do with the table.
A paragraph tag creates a blank like before and after the paragraph.
It becomes more obvious to see if you turn the borders on in your table temporarily by changing border="0" to border = "1".
solution2
0 ACCPTED 2020-03-12 05:11:55
There you go. Wrapped your two column section inside another table and aligned them left. That did fix your issue!
https://codepen.io/ShuvojitDas/pen/wvayQdq
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style color: #EC6700;></style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<title>Mobilly signature</title>
<style>
u+#body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a {
color: #EC6700 !important;
}
</style>
<!-- <meta name="format-detection" content="telephone=no" /> -->
</head>
<body id="body">
<table style="border-spacing:0;text-align:left;" align="left">
<tr style="border-collapse: collapse;">
<td>
<span style="font-family: 'Open Sans', sans-serif !important; font-size:14px; line-height:20px; margin: 0;">Ar
cieņu,</span>
<br>
<p style="font-family: 'Open Sans', sans-serif !important; font-size:14px; line-height:20px;">
<b>Vārds Uzvārds</b><br>Zīmola vadītājs<br>SIA Company<br>Address<br>
</p>
</td>
</tr>
<tr>
<td>
<table align="left">
<tr>
<td align="left" style="padding-right:24px; line-height:21px; font-family: 'Open Sans', sans-serif !important; font-size:14px; width:75px; height:75px;">
<img src="https://mobilly.lv/wp-content/uploads/2020/03/Mobilly-Hor-161x161-1.jpg" width="75" height="75" alt="logo">
</td>
<td align="left" style="line-height:21px; font-family: 'Open Sans', sans-serif !important; font-size:14px; border-collapse: collapse; text-decoration: none !important;">
<div style="color: #EC6700; "><span style="color: #EC6700; text-decoration:none !important;"> <a href="vards.uzvards@mobilly.lv" style="text-decoration:none;"> vards.uzvards@mobilly.lv</a></span><br>
<a href="https://mobilly.lv/" target="blank" style="color: #EC6700; text-decoration:none;"><span style="color: #EC6700; text-decoration:none;">www.mobilly.lv</span></a><br><span style="color: #EC6700; text-decoration:none !important;">
<a href="" style="color: #EC6700; text-decoration:none;">+371 66047706</a></span><br><a href="https://www.facebook.com/mobilly.lv/" target="blank" style="color: #EC6700; text-decoration:none;"><span style="color: #EC6700; text-decoration:none;">Facebook | </span></a><a href="https://www.instagram.com/mobilly.lv/?hl=en" target="blank" style="color: #EC6700; text-decoration:none;"><span style="color: #EC6700; text-decoration:none;">Instagram | </span></a><a href="https://twitter.com/mobilly?lang=en" target="blank" style="color: #EC6700; text-decoration:none;"><span style="color: #EC6700; text-decoration:none;">Twitter |</span></a><a href="https://www.linkedin.com/company/mobillysia" target="blank" style="color: #EC6700; text-decoration:none;"> <span style="color: #EC6700; text-decoration:none;">LinkedIn</span></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 20px;">
<div>
<p> Šis e-pasta sūtījums, kā arī visi tam pievienotie dokumenti ir konfidenciāli un paredzēti vienīgi uzrādītajam adresātam. Sūtījuma satura neakceptēta izpaušana, izplatīšana vai izmainīšana ir aizliegta un var būt prettiesiska. Ja Jūs neesat šī sūtījuma adresāts, lūdzu, informējiet par to nosūtītāju un izdzēsiet sūtījumu no sistēmas.</p>
<p>
The information in this e-mail is confidential. It is intended solely for the addressee and access to the e-mail by anyone else is unauthorised. If you are not a named recipient, any disclosure, copying, reliance on it is prohibited and may be unlawful. If the notice is not intended for you, please notify the sender immediately and delete the e-mail.</p>
</div>
</td>
</tr>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Unwanted Gap in HTML Email for Outlook
HTML email gap in outlook 2013
Html email unwanted gap in Outlook
Vertical 1px on image in windows outlook 07' 10' html email
Outlook 2007 adding a gap around table in html email
HTML email - Outlook 2007+10, unrelated tables aligning
Distorted HTML email in outlook
Outlook HTML email signature
Formatting html email for Outlook
HTML email in outlook
Related Tags