Gmail Email Table Spacing
I know this horse has just about been beat to death.. but I've got a Gmail table spacing issue that is just stumping me this morning.
<td valign="top">
<img src="###/enewsletter_layout_v3_18.jpg" alt="" />
<table cellpadding="0" cellspacing="0" style="background: #000; width: 700px; margin: 0 0 0 8px; text-align: center; color: #fff;">
<tr>
<td val开发者_运维技巧ign="top" style="background: #890000; height: 50px; padding: 10px 15px; font-size: 24px; font-weight: bold;">
New Patient Special Offer <br/>
Save $$$
</td>
</tr>
<tr>
<td valign="top" style="background: #000; height: 50px; padding: 5px 15px 15px 15px;">
<h1 style="font-size: 24px; font-weight: bold;">Do you have a question?</h1>
If you have read anything in this newsletter and have any questions or would like to
discuss further, please contact <br/>
The Centre at (555) 555-5555
</td>
</tr>
</table>
</td>
No matter what I do, the first image in the table there (layout_v3_18) always has spacing under it. About 2-3 pixels of white space in Gmail. Happens on a couple other images in the email, but the rest work fine. No matter how many times I compare the tables, it won't work.
Thoughts?
I've actually run into this problem a lot recently. The code we found that works best (read: looks consistent in the most mail clients) is the following:
<img src="###" style="display: block;" />
Just add the display: block to every image and it fixes the problem.
In answer to my own question (in case someone else has a similar issue), I finally found the issue (or a solution anyways).
I added a style="float: left"
to the image itself, which magically fixed it.
Alternatively, using "display: block" tends to have a similar result if used on all images, but the float seems to clear the spacing specifically for GMail when it's working perfectly fine elsewhere.
Gmail can add white space around any table, including nested tables.
Although a bit of a hack adding the following as an inline style to the table removes the white space:
style="font-size:0.0em;" ...
Had the same issue, I added below line
style="line-height:1px;"
in the td tag above.
In my html template in filelist.
Using display:block
on images reduced some space between image cells but didn't remove all gaps.
Adding the deprecated cellpadding/cellspacing attributes on the parent table (<table border="0" cellpadding="0" cellspacing="0">
) those last gaps were gone too.
I had the same problem and did all the above style options but nothing worked. I made the table height shorter and it removed all the spacings.
精彩评论