问题
I am creating an HTML Email and am struggling getting images to render in Outlook and Gmail. I have the usual problem of extra space being added between table rows in Gmail however assigning block to the display style of the images like this:
style="display:block;"
does not work. The only fix I managed to find was to set line height to zero on all the td elements:
<td style="line-height=0">
but when I do this Outlook then cuts off all the tops of my images! Are there any other fixes I could use ??
----EDIT------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
img
{
display:block;
}
</style>
</head>
<body style:"margin:0; padding:0;">
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="border-spacing:0;border:0">
<table align="center" cellpadding="0" cellspacing="0" width="200"
border="0" style="border-collapse:collapse;background-color:black;padding:0;border-spacing:0;">
<tr style="display:block;">
<td style="padding:0;border:0;border-collapse:collapse;width:20%;margin:0;">
<img src="http://test..co.za/Custom//images/EMail_logocrop.png" style="display:block;"/>
</td>
<td style="color:White;">
If you are having trouble viewing this email <a href="" style="color:White;">click here</a>
</td>
</tr>
<tr style="display:block;line-height:0;">
<td colspan="2">
<img src="http://test..co.za/Custom//images/EMail_logo.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_bet.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_stand.jpg" style="display:block;">
</td>
</tr>
<tr>
<td colspan="2" style="width:100%;line-height:0;">
<img src="http://test..co.za/Custom//images/EMail_games.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_grasscrop.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0;" >
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop2.png" style="display:block;" />
</td>
<td>
<img src="http://test..co.za/Custom//images/EMail_pslcrop.png"/ style="display:block;">
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop3.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_chelseacrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop4.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_cricketcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop5.png" style="display:block;"/>
</td>
</tr>
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop6.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscroppsl.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop7.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropchelsea.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop8.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropt20.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop9.png" style="display:block;"/>
</td>
</tr>
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop10.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_sharkcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop11.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_arsenalcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop12.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_ligacrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop13.png" style="display:block;"/>
</td>
</tr>
<tr style="padding:0px;">
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop14.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropshark.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop15.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscroparsenal.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop16.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropliga.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop17.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="7" >
<img src="http://test..co.za/Custom//images/EMail_grasscrop18.png" style="display:block;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left:10px;">
<img src="http://test..co.za/Custom//images/EMail_footer.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://test..co.za/Custom//images/EMail_grasscropbottom.png" style="display:block;"/>
</td>
</tr>
</table>
</table>
回答1:
Use this for your images:
style="margin: 0; border: 0; padding: 0; display: block;"
That will prevent any spacing around them. If the spacing persists, it is because of the table itself, and in particular the extra (bad word here) Microsoft inserts.
Are you sending/forwarding from Outlook to Gmail? The gaps are unavoidable if that is the case. See similar question here. Note that tables next to tables (in the code, but stacked on page) make bigger gaps than table rows, and by setting the color on a wrapping parent element, you can hide the 'line' created when they separate.
You have a bunch of extra stuff in your code you don't really need. Just put table td {border-collapse: collapse;} in your style tag then all you need is this:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
Just note that table cells need to be a min of about 19px as that is the min-height it can be in Outlook. I prefer to design around that, but some people mess with line-height tricks also.
回答2:
Have you looked into using http://htmlemailboilerplate.com/ - it helps eliminate many of the problems that you are faced with when building HTML emails.
It will help normalise the email across many clients and just leaves you to do the actual building.
来源：https://stackoverflow.com/questions/23655317/html-email-spaces-between-tables-gmail-and-outlook