I have a table with some table data, I'm using inline styles because I want the html to work in an email. But it seems the table data is adding padding to where the images are, I tried using border-collapse: collapse, and everything, but still that little 3 or 4 px padding goes onto the bottom of images in the table data. Here is code for reference:
<!DOCTYPE html>
<html lang="en">
<body>
<table style="background: #E6E6E6; ">
<tr><td style="padding-left:18%;">
<!--one main column in a nested table-->
<table >
<tr><td><p style="text-align: center; font-size: 11px; color: grey;">There’s never been a better time to use the Hulu Plus App on your PS3 » | View as Web page </p></td></tr>
<tr><td><img src="pics/psnetworkheader.png" /></td></tr>
<tr style="background-image: url('pics/topGreyBack.png'); background-repeat:no-repeat;"><td style="padding-left:35px;">
<table><tr style="padding-top:35px;"><!--one row, two td columns and nested table-->
<td style="padding-right: 60px; padding-top: 40px; width:30%;" ><!--left column in grey block-->
<a href="#"><img src="pics/huluImg.png" style="box-shadow: 0 0 6px #eee;"/></a>
<p style="color: #F2F2F2; margin-top: 20px; font-size: 12px; ">The Hulu Plus App on the PS3 features an updated experience with a new layout and intuitive controls. Watch Fall Premieres, stream current hit TV shows
and classic series all from your PS3.</p>
<p style="color: #F2F2F2; margin-top: 20px; font-size:12px;">Not a member? Get a <b>FREE MONTH</b>
of unlimited instant streaming.
<br/>Your promo code is: <b>XXXXXXXXX</b>
</p>
<a href="#">› Try 1 Month Free</a>
<p style="color: #F2F2F2; margin-top: 9px; font-size:9px;">Expires 10/20/12. You must be a new subscriber to receive this offer. </p>
</td>
<td >
<img src="pics/tvImg.png"/>
</td>
</tr></table> <!--end row in grey block-->
</td></tr><!--end grey block-->
<table style="margin-left:2px; width: 720px;">
<tr style="padding-top:35px; "><td style="width:50%;padding-left: 35px; padding-right: 20px;">
<h3>Hulu Plus, its TV on your terms. </h3>
<p><small>With the Hulu Plus app you can watch your favorite shows right on your PS3. From current seasons to the classics, it’s all yours for only $7.99 a month.</small></p>
<ul style="font-size: 13px;">
<li>Easily scroll through popular shows and movies, clips, movie trailers, and personalized recommendations.</li>
<li>Use the new enhanced search function and Shows You Watch feature which highlights the content you regularly enjoy so you can jump straight to the latest episode.</li>
</ul>
</td><!--end first td-->
<td style="padding-left: 55px; padding-top: 40px;">
<table style="border-spacing:10px; ">
<tr>
<td style="padding:0px;-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); ">
<img src="pics/mofa.png"/>
</td>
<td style="padding:0px;-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
<img src="pics/grimm.png"/>
</td>
</tr>
<tr >
<td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
<img src="pics/snl.png"/>
</td>
<td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
<img src="pics/americandad.png"/>
</td>
</tr>
<tr >
<td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
<img src="pics/community.png"/>
</td>
<td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);
box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);">
<img src="pics/familyguy.png"/>
</td>
</tr>
<tr >
<td >
<img src="pics/theoffice.png"/>
</td>
<td >
<img src="pics/naruto.png"/>
</td>
</tr>
<tr >
<td >
<img src="pics/newgirl.png"/>
</td>
<td >
<img src="pics/once.png"/>
</td>
</tr>
</td></tr>
<!--end white block row-->
</table><!-- end white block-->
<!--one big column-->
</table>`enter code here`
</tr></td>
</table> <!--container-->
</body>
</html>
Your images should have inline CSS for display: block;. So something like this:
<img src="pics/huluImg.png" style="box-shadow: 0 0 6px #eee;"/>
Will be this:
<img src="pics/huluImg.png" style="box-shadow: 0 0 6px #eee; display: block;"/>