htmlcssoutlookhtml-email

Microsoft Outlook on Windows Adds Padding to my H4


Take a look at the following image:

image of title with extra line height

What you see there is a highlighted <h4> element (if there's any confusion, that grey is not a background colour, it is me highlighting the text). It has inline styles explicitly declaring padding-bottom: 0; and line-height: 18px; (the same as the font size - not sure if that even works in Outlook, but figured I'd give it a try). In addition, the HTML is completely minified (so its not caused by a whitespace or tab), and the code has been checked for hidden line break characters (there are none).

Nonetheless, Microsoft Outlook (on Windows only) happily ignores me and adds all that extra space underneath the element. I'm tapped out on ideas as to how to fix this issue.

How can I fix the height of this header element so it is only the height of the text?


Solution

  • I find these rules helpful:

     #outlook a{
            padding:0;
        }
        .ReadMsgBody{
            width:100%;
        }
        body{
            width:100% !important;
            min-width:100%;
            -webkit-text-size-adjust:100%;
            -ms-text-size-adjust:100%;
            -webkit-font-smoothing: antialiased;
        }
        v*{
            behavior:url(#default#VML);
            display:inline-block;
        }
        .ExternalClass{
            width:100%;
        }
        td{
            border-collapse: separate !important;
        }
        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div{
            line-height:100%;
        }
    

    You can also add a rule to reset the h4 line-height to 0:

     h4{
        margin:0;
        padding:0;
        border:0;
        font-size:100%;
        line-height:100%;
     }
    

    Then add back in line height INLINE:

     <h4 style: font-size: 24px; color: #000000; line-height: 1.8em;">This is an h4 headline</h4>