Khoảng cách giữa hàng trong bảng html bản tin trong Hotmail và Gmail

Question

Tôi cố gắng tạo bản tin.

Màn hình hiển thị hoàn hảo trên trình duyệt web, hoàn hảo trong thunderbird ... nhưng trong webmail như Gmail hoặc Hotmail ... Tôi có khoảng trống giữa các hàng.

Đây là mã của tôi:

<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> 

Dưới đây là liên kết trực tiếp: http://www.itbag.fr/newsletter/03022012

Và ở đây, có hai ảnh chụp màn hình của màn hình trong Gmail và Hotmail:

Bất cứ ai cũng có thể giúp tôi?

Answer 1

Tôi đoán không có thực sự trả lời cho webmail này ...

tôi thấy trong nguồn này: http://www.campaignmonitor.com/css/ rằng tất cả webmails và độc giả hiểu "phao" ...

Vì vậy, trong tương lai, à thử với cột phao.

Answer 2

tôi giải quyết một vấn đề tương tự với

<td style="line-height:0"><img ... /></td> 

Found on this Q&A, tôi không được phép thông báo tiềm năng trùng lặp được nêu ra.

Answer 3

Thêm style="display: block" như đã đề cập dưới đây

<img style="display: block" src="sample.gif" alt="sample" /> 

và cũng thêm

img { display: block } 

Tham khảo the original post.

Answer 4

Để tham khảo trong tương lai: hãy nhớ rằng td của bạn bên trong cùng một tr phải có cùng đệm trên cùng và dưới cùng. Điều này xảy ra vì bạn đang thêm một số không gian vào một số td và người kia đang nhận không gian nhưng không phải là kiểu (chỉ với không gian bạn đã xác định), vui lòng thêm phần đệm vào chúng.

Điều này cũng có thể xảy ra với đường viền.