Outlook emails extra space in TD cells

Question

Outlook is making everything taller, and also the text goes to 4 lines. I would like the tests to come the same.

See image, the right-hand side, everything is bigger except the font size and leading.

I tried setting line height to 0 and then to 1. It didn't make a difference. Thanks!

 <tr>
    <td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:20px;font-size:20px" height="20px" valign="top" bgcolor="red">&nbsp;</td>
 </tr>

 <tr>
    <td valign="top" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;" bgcolor="blue">
       <div class="mktoText" id="" mktoName="" style="line-height: 30px;font-weight: 400; color: #ffffff; font-size:19px;letter-spacing: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
       </div>
    </td>
 </tr>

Answer 1

It could be just that the table is taking less width in Outlook than your other application. Specifying for example <table width="300">, is as @Digital_Frankenstein said, negligible difference.

I did notice that when using line-height:60px or any pixel value, Outlook renders the text at the bottom of the line:

But when using just a number without digits, e.g. line-height:3, Outlook renders the text at the top of the line! (Same as with percentages, e.g. 300%.)

(Using 'em' seems to be noticeably different - smaller - in Outlooks, and renders at the bottom.)

You may need to specify a margin to the div to get them to line up consistently (normally, it is imperceptible since line-heights are typically quite small).

But also consider that nobody is going to be comparing Outlook to Gmail/Apple Mail etc. when looking at your email. So your aim is not pixel perfection, but rather a consistent experience, adapted to each email environment (mobile, desktop, inside/outside, iOS/Android, etc.)

Blank lines

I've always used a paragraph on a blank line, to get the same height there cross-email environment:

<td bgcolor="red"><p style="font-size:20px;line-height: 20px;">&nbsp;</p></td>