Why is there a space under image?

Get Started
1

I’m racking my brain trying to figure this out. I am creating an html email so this project has to be created in tables.

Why wouldn’t my image sit directly on the bottom of my table cell? Attached is a snapshot of my problem.

And here is that section of code.

</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor='#f5f5f5' >

<table width="600" bgcolor="#ffca05" cellspacing="0" cellpadding="0" align="center" border="0">
<tr>
<td width="107" valign="top" align="left" style="padding-left:15px; padding-right:15px; padding-top: 10px;"> <a href="#" style="text-decoration:none">
<img src="http://mery.com/aw/aaimg/logoeff4.gif" alt="logo" width="119" height="48" border="0">
</a></td>
<td valign="middle" align="center"> <a href="#" style="text-decoration:none; background-color: #000; padding:5px; color:#FFF; font-family:Helvetica, Arial, sans-serif; font-size 14px; font-weight:bold;">EXPIRATION NOTICE
</a></td>
<td valign="bottom" align="right" rowspan="3" cellspacing="0" cellpadding="0"> <a href="#" style="text-decoration:none;">
<img src="http://mery.com/aw/aaimg/eff4.gif" alt=" Data Inc" width="260" height="178" border="0">
</a></td>
</tr>
<tr>
<td valign="top" align="center" colspan="2" cellspacing="0" cellpadding="0" style="padding-left:10px; padding-top:10px; border:none;"> <a href="#" style="text-decoration:none;"><img src="http://meryl.com/aw/aaimg/lockeff4.gif" alt="Lock it or Lose it" width="314" height="46" border="0">
</a></td></tr>
<tr>
<td valign="top" align="center" colspan="2" style="padding-left:10px;"> <a href="#" style="text-decoration:none; color:#000; font-family:'Times New Roman', Times, serif; font-size 15px;">Lock in your savings now and<br>
 continue your access to <em>DataInc</em>.
</a></td>
</tr>
</table>

Thank you for your help. It’s much appreciated.
Meryl

2

Set the image to vertical-align: bottom; E.g.

td img {vertical-align: bottom;}

Images are inline elements (meaning they sit next to other elements) and by default, they align themselves with the baseline of any text that might sit next to them, thus leaving space below for letter descenders. You can tell images not to leave this space at the bottom with the rule above.

3

It worked! Thank you! I also have the space issue on the right side. I tried horizontal-align: right; and I see that’s not correct.

4

I’d have to see the page in question to be able to help. But yes, there’s not horizontal-align, but that shouldn’t be needed anyway.

5

I resolved the issue by having less table cells in my table.

Thanks again.

6

The main issue here is not the vertical alignment of the table cells, its the fact that you appear to be using tables in order to design your website. Tables are used for tabular data. I’d strongly recommend using div’s for your layout. I know you might not want to at first, but its really not that hard to learn. It took me a day or 2 to grasp the concept of table-free layouts.