Spacing between row in newsletter html table in Hotmail and Gmail
11,212
Solution 1
I guess there is no really answer for this webmail...
I see in this source : http://www.campaignmonitor.com/css/ that all webmails and readers understand "float"...
So in the future, à try with float column.
Solution 2
Add style="display: block"
as mentioned bellow
<img style="display: block" src="sample.gif" alt="sample" />
and also add
img { display: block }
Refer to the original post.
Solution 3
I solved a similar problem with
<td style="line-height:0"><img ... /></td>
Found on this Q&A, I am not allowed to notify potential duplicate yet.
Comments
-
Raphaël almost 2 years
I try to create an newsletter.
The display is perfect on web browser, perfect in thunderbird too... but in webmails like Gmail or Hotmail... I have spaces between the rows.
Here is my code :
<center><a href="http://www.itbag.fr/newsletter/03022012/" style="color:#E84691;font-size:10px;">Si la newsletter s'affiche mal, consultez la en ligne</a> <table id="Table_01" width="731" height="731" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" align="left" valign="top"> <a href="http://www.itbag.fr" style="display:block;height:131px"> <img src="http://www.itbag.fr/newsletter/03022012/images/image001_01.jpg" width="640" height="131" border="0" alt=""></a></td> <td align="left" valign="top"> <a href="https://www.facebook.com/Itbag.fr?sk=app_128552947241828" style="display:block;height:131px"> <img src="http://www.itbag.fr/newsletter/03022012/images/image001_02.jpg" width="90" height="131" border="0" alt=""></a></td> <td align="left" valign="top"> <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="131" alt=""></td> </tr> <tr> <td colspan="2" align="left" valign="top"> <a href="http://www.itbag.fr" style="display:block;height:74px"> <img src="http://www.itbag.fr/newsletter/03022012/images/image001_03.jpg" width="365" height="74" border="0" alt=""></a></td> <td colspan="2" rowspan="2" align="left" valign="top"> <a href="http://www.itbag.fr/sacs-d-occasion-de-marques/1130-sac_24h_gerard_darel_en_python_neuf.html" style="display:block;height:286px"> <img src="http://www.itbag.fr/newsletter/03022012/images/image001_04.jpg" width="365" height="286" border="0" alt=""></a></td> <td align="left" valign="top"> <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="74" alt=""></td> </tr> <tr> <td rowspan="2" align="left" valign="top"> <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1114-cabas_burberry_beige.html" style="display:block;height:258px"> <img src="http://www.itbag.fr/newsletter/03022012/images/image001_05.jpg" width="187" height="258" border="0" alt=""></a></td> <td rowspan="2" align="left" valign="top"> <a href="http://www.itbag.fr/accessoires-co/1128-expresso.html" style="display:block;height:258px"> <img src="http://www.itbag.fr/newsletter/03022012/images/image001_06.jpg" width="178" height="258" border="0" alt=""></a></td> <td align="left" valign="top"> <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="212" alt=""></td> </tr> <tr> <td colspan="2" rowspan="3" align="left" valign="top"> <a href="http://www.itbag.fr/accessoires-co/1107-ballerines_heritage.html" style="display:block;height:313px"> <img src="http://www.itbag.fr/newsletter/03022012/images/image001_07.jpg" width="365" height="313" border="0" alt=""></a></td> <td align="left" valign="top"> <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="46" alt=""></td> </tr> <tr> <td align="left" valign="top"> <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1118-peekaboo.html" style="display:block;height:227px"> <img src="http://www.itbag.fr/newsletter/03022012/images/image001_08.jpg" width="187" height="227" border="0" alt=""></a></td> <td align="left" valign="top"> <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1120-muse_two_large.html" style="display:block;height:227px"> <img src="http://www.itbag.fr/newsletter/03022012/images/image001_09.jpg" width="178" height="227" border="0" alt=""></a></td> <td align="left" valign="top"> <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="227" alt=""></td> </tr> <tr> <td colspan="2" align="left" valign="top"> <a href="http://www.itbag.fr/mon-compte" style="display:block;height:40px"> <img src="http://www.itbag.fr/newsletter/03022012/images/image001_10.jpg" width="365" height="40" border="0" alt=""></a></td> <td align="left" valign="top"> <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="40" alt=""></td> </tr> <tr> <td align="left" valign="top"> <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="187" height="1" alt=""></td> <td align="left" valign="top"> <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="178" height="1" alt=""></td> <td align="left" valign="top"> <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="275" height="1" alt=""></td> <td align="left" valign="top"> <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="90" height="1" alt=""></td> <td></td> </tr> </table></center>
Here is the direct link : http://www.itbag.fr/newsletter/03022012
And here, there is two screenshots of display in Gmail and Hotmail :
Anyone can help me ?
-
surfbird0713 almost 11 yearsthis solved my problem too. i always use display:block but had one random email that wouldn't work with it. line height fixed it. thank you.
-
haui over 8 yearsThis is the solution - the webmail software adds additional white-space to the HTML source code of the mail. This additional white-space causes the gap "between" table cells. The gap is not between the cells. But the added white space make cells grow.