I have this module for a responsive email design that inserts a little tiny amount of whitespace below my images and I can’t figure out why. It doesn’t seem to matter what the proportions or size of the image are. Always the same amount of space.
I inlined all of my CSS – the class declarations are only for @media queries. I’ve added padding-bottom: 0; border:0; border-collapse:collapse; to anything I could think of that contains that image in some way, nothing seems to even change the result in any way…
Here’s a screenshot of the problem. You can see the small whitespace below her photo.
<table style="background-color:grey">
<tr>
<td style="padding-left: 25px; padding-right:25px; padding:bottom:0px!important; border:0!impotant;">
<table class="oneup50" align="center" valign="middle" style="width: 100%; vertical-align: middle; background-color: #FFFFFF; border:0; padding-bottom: 0; border-collapse: collapse!important;" role="presentation" dir="ltr">
<tr>
<td class="stackB" style="padding-bottom:0!important; display: inline-block!important; border:0!important; border-collapse:collapse!important;">
<table>
<tr>
<td style="padding: 0;">
<a href="URL"><img width="287" class="imgStack" style="border: 0;" src="https://i.imgur.com/I1d9YPY.png"></a>
</td>
</tr>
</table>
</td>
<td class="stack" valign="middle" align="center" width="263" style="height:219px; border:0; padding-bottom: 0; display: inline-block; vertical-align: middle!important;">
<table role="presentation" valign="middle" style="border: 0; vertical-align: middle; display:inline-block;">
<tr>
<td valign="middle" style="width:47%; vertical-align: middle; padding:0;" height="218">
<table style="display:inline-block;">
<tr>
<td style="padding: 0;">
<center>
<h2 style="padding: 0 15% 0 15%; margin:0; font-family: 'Arial'; font-size: 12pt; color: #002855; line-height: 14pt; font-weight: bold; text-align: middle;">
How mindful are you?
</h2>
<p style="padding: 0 15% 10px 15%; font-family: 'Arial'; font-size: 10pt; line-height: 12pt; color: #63666a;">
See if your habits and attitudes are helping you be more present and purposeful.
</p>
<a class="button" rel="noopener" target="_blank" href="URL" style="background-color: #1a7ead; font-size: 12px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 40px; color: #ffffff; display: inline-block; mso-padding-alt: 0;">
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;"> </i>
<![endif]-->
<span style="mso-text-raise: 15pt;">Take the quiz</span>
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%;"> </i>
<![endif]-->
</a>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
2
Answers
I figured it out thanks to this post: Image inside div has extra space below the image
Setting the image ITSELF to display: block fixed it!
This is caused by the fact that an image is an inline element by default.
You can change the image to block,
<img style="display:block;" ... />, or, if you wanted to be able to center the image still, use vertical-align:middle:<img style="vertical-align:top;" ... />(or middle, or bottom – it actually doesn’t matter).That would allow you to, for example, keep your image centered on mobile screens, while still having it left aligned on desktop.