My email is sending perfectly from MS Outlook (2013), but in the GMail app for Android (also happening on iOS) there seems to be an unwanted gap between lines.
It's known that MS Outlook changes the HTML upon sending the email, which can be viewed by saving the email as HTML.
To make it easier to identify the issue, I have created a simple HTML template for assistance:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gmail APP issue</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<table style="border:0px;border-spacing:0px;border-collapse:collapse;">
<tbody>
<tr>
<td>
<p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
</td>
</tr>
<tr>
<td>
<p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I've tried various solutions without success:
- Added
line-height:0to the<td>element and customline-heightto the<p>element, but this didn't work well as<td>wasn't displayed in MS Outlook when using units. Using units like 0px resulted in the same issue on the app. - Added a
min-widthto the table and cells. - Added cellspacing and cellpadding attrs to the table, even though MS Outlook adds them automatically.
Unfortunately, none of these attempts resolved the issue.
I will add a red background to the <p> element and a green one to the <td> element for clarity on what's happening.
This is how the email appears in MS Outlook:
https://i.sstatic.net/MZLwy.jpg
And this is how it appears in the Gmail app: https://i.sstatic.net/fWsHu.png
You can see the gap introduced by Gmail. It might seem due to lengthy text, but that's not the main issue—I simply wanted to include some descriptive text.
I'll continue troubleshooting until I find a solution. Any assistance would be greatly appreciated.
EDIT: Here is the processed HTML generated by each client based on the above template, focusing only on the table cell output:
HTML sent by MS Outlook:
<tr>
<td style="padding:0in 0in 0in 0in">
<p class="MsoNormal"><span style="font-size:13.5pt;font-family:"Times New Roman",serif;color:black">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</span></p>
</td>
</tr>
In MS Outlook, a <p> element is added to wrap the table content instead of using another element suggested by some users.
Note that MS Outlook removes the inline style="margin:0;, but the MsoNormal class prevents top and bottom margins from being added.
Gmail (Android) processing of HTML received from MS Outlook
<tr>
<td style="padding:0cm 0cm 0cm 0cm">
<p class="MsoNormal"><span style="font-size:13.5pt;font-family:"Times New Roman",serif;color:black">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK<u></u><u></u></span></p>
</td>
</tr>
The applied style to the <p> element is:
.msg-8292648110214437287 p {
margin-right: 0cm;
margin-left: 0cm;
font-size: 12.0pt;font-family:"Times New Roman",serif;
}
The autogenerated class msg-8292648110214437287 by Gmail only adds margin to left and right, neglecting the top and bottom margins.
Default styles are contributing to the gaps:
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
The observed gaps are due to these top and bottom margins.
Things I've attempted:
- Added
p { margin:0px!important; }within the<style>tag - Applied
font-size:0pxto the<td>element along with desired size in a span around the text. This method removed the margin but didn't resolve the issue. - Tried similar approaches with line-height adjustments, etc.
Your expertise with Gmail behavior would be valuable here. This setup works fine in GMail Web, indicating a different challenge on the app.
Thank you for any help provided—it's taking longer than anticipated, and your assistance is truly appreciated.