I am currently utilizing the foundation framework for emails and have encountered a formatting issue on my Test Page. There seems to be an unwanted whitespace just below the racoon image that I am struggling to remove. Despite setting the height to 250px, which matches the image size, the white line persists. I have reviewed my CSS code to check for any padding causing this issue, but so far, I have not been able to identify the culprit.
Given the extensive styling provided by the foundation framework, I decided to create a fiddle to seek assistance:
Could someone please help me identify why this white line is appearing?
Relevant HTML
<table class="row background-color__yellow">
<tr>
<td class="center" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<table class="twelve columns background-color__yellow">
<tr>
<td style="padding-top: 30px;">
<h3 class="headline">Greetings [name] [lastname]</h3>
<br/>
<span>Thank you for your reservation at [Place]. If you have any questions, feel free to reach out. Our office hours are from 8:30 AM to 4:00 PM on weekdays.
</span>
<br><br>
<span>
We wish you a pleasant stay
</span>
<span>Kind regards</span>
<br/>
<span>Name</span>
<br/><br/>
<span>[condition statement] PS: It's free to join our guest club, where you can earn points on stays and access a variety of great deals.</span>
<br/><br/>
<span>[text]<a href="https://www.google.com/benefits/login/">Click here to learn more and sign up</a></span>
<br><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>