How to remove spaces at the top and bottom of an HTML email?

60 Views Asked by At

I want to create an HTML email with tables. But my problem is that when I send the email from Gmail to an iCloud email there is a white space at the top and bottom which I don't want.

Here is an excerpt of my code that I prepared for this question.

I tried adding style="border-collapse: to my table and also tried adding style="margin: 0; padding: 0; but neither seemed to work. If I add the margin to zero, the white space in my index.html disappears when I open it from my PC, but doesn't disappear when I open the email from my iPhone.

How it looks on iCloud:

enter image description here

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <table width="640px" align="center" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" border="0">
    <tr>
      <td>
        <img src="https://i.imgur.com/M2OgVKj.jpeg" style="display: block;
                    width: 100%" />
      </td>
    </tr>
  </table>
</body>

</html>

1

There are 1 best solutions below

0
Jatin sharma On

Add margin:0 on body and then try:

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
 
</head>

<body style="margin:0;padding:0;">
  <table width="640px" align="center" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" border="0">
    <tr>
      <td>
        <img src="https://i.imgur.com/M2OgVKj.jpeg" style="display: block;
                    width: 100%" />
      </td>
    </tr>
  </table>
</body>

</html>