Gmail does not recognize valign nor vertical-align - html-email

Question

I'm making an e-mail template. I want to make a line below the heroImage.jpg. The line cannot be a part of the heroImage.jpg as there are several other lines in the e-mail and they should all look the same.
The way I do it is that I set a border-bottom to a table row in which heroImage.jpg is placed.
My problem is that in GMAIL (when the e-mail is delivered, but not in OUTLOOK for example) I get a thin ribbon of space between heroImage.jpg and my line. I think it is because GMAIL does not recognize valign nor vertical-align and thus the heroImage.jpg is aligned top (probably default option) and the colour of #heroImageBlock is thus visible.
But how it should be is that heroImage.jpg would be aligned bottom and right below to it would be my line (no annoying space in between).
Is there a way to force GMAIL to recognize valign or vertical-align and get rid of that annoying space?
HTML
<tr>
<td align="center" valign="bottom" id="heroImageContainer">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="heroImageBlock">
<tr class="border-bottom">
<td>
<img src="images/heroImage.jpg" alt="" height="150" width="600" id="heroImage" />
</td>
</tr>
</table>
</td>
</tr>
CSS
#heroImageBlock td{vertical-align:bottom;}
I've tried to assign vertical align to all other elements too (see below) but it does not work.
#heroImageContainer {vertical-align:bottom;}
#heroImageBlock{vertical-align:bottom;}
#heroImageBlock tr{vertical-align:bottom;}
In OUTLOOK image and a red line are nicely together as it should be:
In GMAIL there is an annoying gray line between the image and the red line.

Answer 1

Valign/vertical align isn't your issue here. Since you're specifically setting a block image, you shouldn't have anything to vertically align. This points to another issue to do with the way you're declaring the image, but I'll get to that soon.
FYI, it's best if you give us more scope or more code. You're referencing a border-bottom class, but we can't see what properties to render that border are. Same goes for the id on the image. If any properties are being set on classes or IDs in the head, it's best to include those for us to help you debug.
Here are my suggested improvements to try and fix this.
1. Don't set any properties or classes on table rows. They aren't designed for that use. Moving the border may fix the issue but even if it doesn't, tables and table cells are where you should be adding these. In this case, move the border-bottom class declaration to the table cell under the row.
2. Have you tried setting display:block; on the image? By default, images will be declared as inline and you have to specifically set is as block. When inline, spacing can appear below images and will throw spacing and dimensions out when trying to be pixel perfect, or in your case aligning content directly below.
Let me know how those go.

Answer 2

Try adding these styles to the parent element:
font-size:0px and line-height:0px.
By default Gmail tends to add its own spacing. The above should remove it.