HTML Email image cut in half?

TL:DR

Set the line height of the container to 1.

div {
    line-hieght: 1;
}

You might need to add “display: block;”

div {
    display: block; 
    line-height: 1;
}

Long version:

If you are creating an HTML email that is to be sent to an Outlook email client, you may see in test emails that an image is being cut in half. Like so:

Even when you have set the height and width of a html image manually and inline , outlook still seems to have issues displaying the image correctly depending on what you emails markup may look like.

You may have to deal with WYSIWYG editors that are auto generating the email and they can also face errors that come out of no where.

Putting, inline “display: block; line-height: 1;” like so can force outlook to display the image correct.

<img style="display: block; line-height: 1;" src=""/>

You may have to experiment with different inline styles depending on your email. Like so.

<td width="156" height="42" align="right" valign="bottom" style="line-height: 1;">
    <table width="156" border="0" cellspacing="0" cellpadding="0" style="line-height: 1;">
        <a href="https://www.example.com/" target="_blank" style="display: block; line-height: 1;" >
            <img style="display: block; line-height: 1;" src="https://www.example.com/emarketing/logo.jpg" width="196" height="42">
        </a>
    </table>
</td>

Result:

The reason for this is due to Outlook not respecting the height attribute if line-height is not set to at least 1.

Sources:

https://stackoverflow.com/a/21603951

https://www.campaignmonitor.com/css/