Outlook live image wrapped in p with spacing

Question

I have a signature setup with image. when displayed in outlook live there is a white space below the image.

When looking at css in live version and testing around i experience that when i try to add vertical align bottom it will not be accepted. Also all is wrapped within a

The code for my outlook 20xx hmtl is

<td width="106pt" height="80pt" valign="bottom" style="width:106pt; height:80pt; padding:0cm 0cm 0cm 0cm;overflow:hidden;">
<span style="">
    <!--[if gte vml 1]>
        <v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
        <v:stroke joinstyle="miter"/> 
        <v:formulas> 
            <v:f eqn="if lineDrawn pixelLineWidth 0"/> 
            <v:f eqn="sum @0 1 0"/> <v:f eqn="sum 0 0 @1"/> <v:f eqn="prod @2 1 2"/> <v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 0 1"/> <v:f eqn="prod @6 1 2"/> <v:f eqn="prod @7 21600 pixelWidth"/> <v:f eqn="sum @8 21600 0"/> <v:f eqn="prod @7 21600 pixelHeight"/> <v:f eqn="sum @10 21600 0"/>
        </v:formulas> 
        <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/> 
        <o:lock v:ext="edit" aspectratio="t"/> 
        </v:shapetype>
        <v:shape id="_x0000_i1025" type="#_x0000_t75" alt="" style='z-index:-9999999999;position:relative;vertical-align:bottom;width:106.5pt;height:79.5pt;left:0;right:0;top:0;bottom:0;border:none;padding:0;'> 
        <v:imagedata src="image_bestanden/image001.png" o:style="vertical-align:bottom;" o:href="https://logos.solvarea.nl/logo-klein.png"/> 
        </v:shape><![endif]--><!--[if !vml]-->
        <img width="142pt" height="106pt" src="image_bestanden/logo-klein.png" u1:shapes="Afbeelding_x0020_7" v:shapes="_x0000_i1025" style="z-index:-9999999999;position:relative;width:106.5pt;height:79.5pt;left:0;right:0;top:0;bottom:0;border:none;padding:0;"><!--[endif]--><o:p></o:p>
</span>

the code when viewed from outlook live webmail is

<td width="141" valign="bottom" style="width:106.0pt; padding:0cm 0cm 0cm 0cm; height:80.0pt">
<p class="x_MsoNormal">
    <span style="z-index:251659264;margin-left:0px;margin-top:0px;width:142px;height:106px;">
        <img data-imagetype="AttachmentByCid" originalsrc="cid:image001.png@01D61A2E.E1009D60" data-custom="AQMkADAwATM0MDAAMS0xYWYzLWRhMGUtMDACLTAwCgBGAAADIdns%2BrM%2FpU%2BgzRRu07Gu5wcAjNRFWKEIfkOT%2BKGV81qa2AAAAHlCn0AAAACM1EVYoQh%2BQ5P4oZXzWprYAAAAedFfHQAAAAESABAAgUBrLLMzc0O%2FwWz0AYsTMw%3D%3D" naturalheight="0" naturalwidth="0" src="https://attachment.outlook.live.net/owa/MSA%3Ainfo%40solvarea.nl/service.svc/s/GetAttachmentThumbnail?id=AQMkADAwATM0MDAAMS0xYWYzLWRhMGUtMDACLTAwCgBGAAADIdns%2BrM%2FpU%2BgzRRu07Gu5wcAjNRFWKEIfkOT%2BKGV81qa2AAAAHlCn0AAAACM1EVYoQh%2BQ5P4oZXzWprYAAAAedFfHQAAAAESABAAgUBrLLMzc0O%2FwWz0AYsTMw%3D%3D&amp;thumbnailType=2&amp;owa=outlook.live.com&amp;scriptVer=2020041301.15&amp;isc=1&amp;X-OWA-CANARY=NPjGibPcQ0qALOT-cp3ahvDPHwU26NcY09lJo-IPciyNM7BHpHxUc0IYLDQjPUhvEVmPgCyJ9XI.&amp;token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjU2MzU4ODUyMzRCOTI1MkRERTAwNTc2NkQ5RDlGMjc2NTY1RjYzRTIiLCJ4NXQiOiJWaldJVWpTNUpTM2VBRmRtMmRueWRsWmZZLUkiLCJ0eXAiOiJKV1QifQ.eyJvcmlnaW4iOiJodHRwczovL291dGxvb2subGl2ZS5jb20iLCJ2ZXIiOiJFeGNoYW5nZS5DYWxsYmFjay5WMSIsImFwcGN0eHNlbmRlciI6Ik93YURvd25sb2FkQDg0ZGY5ZTdmLWU5ZjYtNDBhZi1iNDM1LWFhYWFhYWFhYWFhYSIsImlzc3JpbmciOiJXVyIsImFwcGN0eCI6IntcIm1zZXhjaHByb3RcIjpcIm93YVwiLFwicHJpbWFyeXNpZFwiOlwiUy0xLTI4MjctMjEyOTkzLTQ1MjE4ODY4NlwiLFwicHVpZFwiOlwiOTE0Nzk4NDIxNDY1NjE0XCIsXCJvaWRcIjpcIjAwMDM0MDAxLTFhZjMtZGEwZS0wMDAwLTAwMDAwMDAwMDAwMFwiLFwic2NvcGVcIjpcIk93YURvd25sb2FkXCJ9IiwibmJmIjoxNTg3NzIyMjk5LCJleHAiOjE1ODc3MjI4OTksImlzcyI6IjAwMDAwMDAyLTAwMDAtMGZmMS1jZTAwLTAwMDAwMDAwMDAwMEA4NGRmOWU3Zi1lOWY2LTQwYWYtYjQzNS1hYWFhYWFhYWFhYWEiLCJhdWQiOiIwMDAwMDAwMi0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvYXR0YWNobWVudC5vdXRsb29rLmxpdmUubmV0QDg0ZGY5ZTdmLWU5ZjYtNDBhZi1iNDM1LWFhYWFhYWFhYWFhYSIsImhhcHAiOiJvd2EifQ.nE62tvQW0Eq-Hp0PUso5xNSs1tWoKv7QkZ00CkUwZKp2crlChrYbKtSxYJS6DtwnVbkvn8l3E4_sevDp_4rW7iQa3yTHFC-vxHSlsp9WVQU7su2LoWfkAdpY1PX4OYyES0tqu6vFySz28h836onIS9wq8db1vbQgLA9Z5ScavNds38w43cPo_EclGhrRnuOcIMfmRUhzYEquvscmWc33V_jW6ETd__ZLnCY6LV3s_oOy_IrdzWWQyoGbU_Zr-cFX_zCMTcdRzcHrTiIUEjjevyjbLt7RWEvyLAP9AJsVBH_su1o6fuG9g8xpVhex77_FXMcrT20d812xrx62R1_a4g&amp;animation=true" width="142" height="106" alt="https://logos.solvarea.nl/logo-klein.png" style="cursor: pointer;" crossorigin="use-credentials">
    </span>
    <span style="font-size:12.0pt; font-family:&quot;Times New Roman&quot;,serif">
    </span>
</p>

The code should be (when added vertical-align:bottom; to image in browser):

<td width="141" valign="bottom" style="width:106.0pt; padding:0cm 0cm 0cm 0cm; height:80.0pt">
<p class="x_MsoNormal">
    <span style="z-index:251659264;margin-left:0px;margin-top:0px;width:142px;height:106px;">
        <img data-imagetype="AttachmentByCid" originalsrc="cid:image001.png@01D61A2E.E1009D60" data-custom="AQMkADAwATM0MDAAMS0xYWYzLWRhMGUtMDACLTAwCgBGAAADIdns%2BrM%2FpU%2BgzRRu07Gu5wcAjNRFWKEIfkOT%2BKGV81qa2AAAAHlCn0AAAACM1EVYoQh%2BQ5P4oZXzWprYAAAAedFfHQAAAAESABAAgUBrLLMzc0O%2FwWz0AYsTMw%3D%3D" naturalheight="0" naturalwidth="0" src="https://attachment.outlook.live.net/owa/MSA%3Ainfo%40solvarea.nl/service.svc/s/GetAttachmentThumbnail?id=AQMkADAwATM0MDAAMS0xYWYzLWRhMGUtMDACLTAwCgBGAAADIdns%2BrM%2FpU%2BgzRRu07Gu5wcAjNRFWKEIfkOT%2BKGV81qa2AAAAHlCn0AAAACM1EVYoQh%2BQ5P4oZXzWprYAAAAedFfHQAAAAESABAAgUBrLLMzc0O%2FwWz0AYsTMw%3D%3D&amp;thumbnailType=2&amp;owa=outlook.live.com&amp;scriptVer=2020041301.15&amp;isc=1&amp;X-OWA-CANARY=NPjGibPcQ0qALOT-cp3ahvDPHwU26NcY09lJo-IPciyNM7BHpHxUc0IYLDQjPUhvEVmPgCyJ9XI.&amp;token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjU2MzU4ODUyMzRCOTI1MkRERTAwNTc2NkQ5RDlGMjc2NTY1RjYzRTIiLCJ4NXQiOiJWaldJVWpTNUpTM2VBRmRtMmRueWRsWmZZLUkiLCJ0eXAiOiJKV1QifQ.eyJvcmlnaW4iOiJodHRwczovL291dGxvb2subGl2ZS5jb20iLCJ2ZXIiOiJFeGNoYW5nZS5DYWxsYmFjay5WMSIsImFwcGN0eHNlbmRlciI6Ik93YURvd25sb2FkQDg0ZGY5ZTdmLWU5ZjYtNDBhZi1iNDM1LWFhYWFhYWFhYWFhYSIsImlzc3JpbmciOiJXVyIsImFwcGN0eCI6IntcIm1zZXhjaHByb3RcIjpcIm93YVwiLFwicHJpbWFyeXNpZFwiOlwiUy0xLTI4MjctMjEyOTkzLTQ1MjE4ODY4NlwiLFwicHVpZFwiOlwiOTE0Nzk4NDIxNDY1NjE0XCIsXCJvaWRcIjpcIjAwMDM0MDAxLTFhZjMtZGEwZS0wMDAwLTAwMDAwMDAwMDAwMFwiLFwic2NvcGVcIjpcIk93YURvd25sb2FkXCJ9IiwibmJmIjoxNTg3NzIyMjk5LCJleHAiOjE1ODc3MjI4OTksImlzcyI6IjAwMDAwMDAyLTAwMDAtMGZmMS1jZTAwLTAwMDAwMDAwMDAwMEA4NGRmOWU3Zi1lOWY2LTQwYWYtYjQzNS1hYWFhYWFhYWFhYWEiLCJhdWQiOiIwMDAwMDAwMi0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvYXR0YWNobWVudC5vdXRsb29rLmxpdmUubmV0QDg0ZGY5ZTdmLWU5ZjYtNDBhZi1iNDM1LWFhYWFhYWFhYWFhYSIsImhhcHAiOiJvd2EifQ.nE62tvQW0Eq-Hp0PUso5xNSs1tWoKv7QkZ00CkUwZKp2crlChrYbKtSxYJS6DtwnVbkvn8l3E4_sevDp_4rW7iQa3yTHFC-vxHSlsp9WVQU7su2LoWfkAdpY1PX4OYyES0tqu6vFySz28h836onIS9wq8db1vbQgLA9Z5ScavNds38w43cPo_EclGhrRnuOcIMfmRUhzYEquvscmWc33V_jW6ETd__ZLnCY6LV3s_oOy_IrdzWWQyoGbU_Zr-cFX_zCMTcdRzcHrTiIUEjjevyjbLt7RWEvyLAP9AJsVBH_su1o6fuG9g8xpVhex77_FXMcrT20d812xrx62R1_a4g&amp;animation=true" width="142" height="106" alt="https://logos.solvarea.nl/logo-klein.png" style="cursor: pointer;vertical-align: bottom;" crossorigin="use-credentials">
    </span>
    <span style="font-size:12.0pt; font-family:&quot;Times New Roman&quot;,serif">
    </span>
</p>

I tried to add o:style="vertical-align:bottom;" but it is rejected/ignored by Outlook Live mail.

So the preferred result would be to have the style for the v:shape added the vertical align style format: style="cursor: pointer;vertical-align: bottom;"

How can i achieve this in my html template to have outlook live accept the vertical align properly?

Hope someone can help, this issue cost me already 2 days of testing with no result

This is common on images, due to those are inline: you can get more info here : https://stackoverflow.com/questions/7774814/remove-white-space-below-image — Manjuboyz, Apr 24 '20 at 10:18
Hi manjuboyz, thank you. Tried the options, by adding display:block will not move image to bottom. — Marcel, Apr 24 '20 at 12:19
are you still facing the issue? can you create a snippet out from your code to look into? — Manjuboyz, Apr 24 '20 at 13:31

score 1 · Answer 1 · answered Apr 24 '20 at 11:07

Well, if what I understood is that you want the picture itself to stay at the bottom, you could try applying an absolute property on the wrapper of the image (in this case, the <span> tag) and set on its style : bottom: 0;, so the image container will always remain at the bottom.

<td width="106pt" height="80pt" valign="bottom" style="width:106pt; height:80pt; padding:0cm 0cm 0cm 0cm;overflow:hidden;">
<span style="position:absolute;bottom:0;">
        <img width="142pt" height="106pt" src="image_bestanden/logo-klein.png" u1:shapes="Afbeelding_x0020_7" v:shapes="_x0000_i1025" style="z-index:-9999999999;position:relative;width:106.5pt;height:79.5pt;left:0;right:0;top:0;bottom:0;border:none;padding:0;"><!--[endif]--><o:p></o:p>
</span>

Hi mattdaspy, thank you, i tried this but unfortunately when applying, the image will be thrown to bottom of table instead of table row. — Marcel, Apr 24 '20 at 12:18

Vivek Kumar · Answer 2 · 2022-11-17T10:48:58.097

We have 2 solutions for this problem:

Applying position:absolute;bottom:0; to the wrapper of image, wrapped within td. eg.

 <td width="106pt" height="80pt" valign="bottom" style="width:106pt; height:80pt; padding:0cm 0cm 0cm 0cm;overflow:hidden;">
   <span style="position:absolute;bottom:0;">
     <img width="142pt" height="106pt" src="image_bestanden/logo;">
   </span>
 </td>

By providing the calculated padding to the td element of image which is hiding.

Outlook live image wrapped in p with spacing

2 Answers2