Question 170873 in Html Question posted in
Some basic documentation can be found here.

“How can I remove extra whitespace under an image in an HTML email table?”

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;">&nbsp;</i>
    <![endif]-->
                            <span style="mso-text-raise: 15pt;">Take the quiz</span>
                            <!--[if mso]>
    <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
    <![endif]-->
                          </a>
                        </center>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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!


  2. 0

    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.

    <p style="text-align:center;"><img style="vertical-align:top;" ... /></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search