IA
0
Top and Bottom Space Around Image in Outlook 2010 and 2013
Hey guys, I've tried the line height trick, display: block and padding/margin/border all set to 0 and I still get a space on top and bottom of my images in outlook 2010 and 2013. Anyone have any ideas? Here's my code.
<tr>
<td align="center" valign="top" style="font-family: Arial, sans-serif;">
<table border="0" align="center" valign="bottom" width="600" cellpadding="0" cellspacing="0" style="border:0;border-collapse:collapse">
<tr style="font-family: 'Arial', sans-serif;">
<td mc:edit="text-3" width="300" align="center" valign="top" style="width: 300px;font-family: Arial, sans-serif; padding: 20px 15px;">
<p>Text block 3</p>
</td>
<td mc:edit="right-img" width="300" align="center" valign="top" style="width: 300px;font-family: Arial, sans-serif;margin: 0; padding: 0; border: 0;">
<img height="300" src="http://www.fillmurray.com/300/300" width="300" style="border: 0px; width: 300px; height: 300px; margin: 0px; display:block; padding: 0px;" width="300" />
</td>
</tr>
</table>
</td>
</tr>
The problem is the padding (20px 15px) on the td, the tds will adjust their height. If you remove it, it'll work fine. I don't have a solution right now for this way.
But you could do the column layout with two tables instead and set the padding in the nested td. If you do so, don't forget the conditional comments for Outlook.
Hope this helps you
Nested table! You put another table inside your cell on the left, in which you can specify any padding you want... As Robin Nieminen said, padding that you specified had repercussions on the sister cell. With the solution below, no more problem!
Oh my gosh! Thank both of you so much! I never would have thought to do that.....
You're welcome! ;)