How to remove gap between images on certain email clients (when cellspacing/padding already equals 0)

I'm developing an email where, by design, the banner image appears to be overlapping into the header. The effect is achieved by taking the top 35px or so of the banner image and making it its own image which sits in the row above the remainder of the banner image.

Here's a mockup with outlines of what I mean; the top portion of the image has a white background, while the rest of the image has a light blue background. The effect is that the image appears to be overlapping into the white.

mockup of email design

However, on some email clients (ran through the Hubspot tester) there's a gap between the images:

gap between images

I've tried the following, with no luck:

cellpadding and cellspacing = 0 to both tables
included table-collapse to my CSS
added margin-bottom to the top image (which only works on some email clients)
tried to valign="bottom" to the top image so it would sit on the bottom of the table

Here's the section of the email code, which works in the Hubspot preview, but not specific email clients:

     <!-- TOP PORTION OF BANNER IMAGE -->
    <table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
                    <tr>
                        <td width="100%">
                            <table class="devicewidth" valign="center" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr align="center">
                                    <td cellpadding="0" cellspacing="0" style="padding:0" width="100%">
                                        {% linked_image "webinar-editable-bannere-top" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto;;margin-bottom:-5px' %}
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!-- END TOP PORTION OF BANNER IMAGE -->
    <!-- REMAINDER OF BANNER IMAGE -->
    <table bgcolor="#EDF1FC" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
                    <tr>
                        <td width="100%">
                            <table class="devicewidth" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr align="center">
                                    <td valign="top" style="padding:0" width="100%">
                                        {% linked_image "webinar-editable-bannere-bottom" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto' %}
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
  <!-- END REMAINDER OF BANNER IMAGE -->

Are there specific ways I can get those images to align together across the board, outside of the methods I included above?

Solution

Fixed the issue by adding a style="display:block" to images.