[SOLVED] Adding Proper Line Spacing In HTML Email Markup for Hotmail Email Client!

Amazon If you develop customized HTML emails for your subscribers you may encounter a strange issue when your HTML email is rendered in a Hotmail email address recipient: You see many unusually large vertical spaces inside your email. The exact same HTML markup looks fine in the web user interface of other email recipients such as Yahoo and Gmail, but it looks bad in Hotmail's web user interface. Why?

Suppose you have a website and your site visitors sign up for your newsletter. You send out the newsletter periodically. You write the HTML markup of the newsletter by yourself. Your newsletter is rendered fine in some email clients but rendered strangely in others. This article is about this use case.

What's your markup like?

Suppose you want to insert a 10px line spacing between two lines of text. Does your HTML markup look something like the following?

If so, Hotmail would automatically insert a space   inside the empty <div> tag so it looks like this when rendered in Hotmail's online email interface (i.e. when your subscriber signs into his Hotmail email at hotmail.com):

To see the HTML source code of your rendered email, use a web developer tool such as Chrome.

However this is not what you want because it makes the vertical spacing much larger. It doesn't break the layout; it just makes your HTML email look unnatural. In fact Hotmail does a lot of things to modify your original HTML markup before it's delivered for many reasons. Read on to find an easy solution to change the spacing between lines or paragraphs in your HTML emails.

Solution

Instead of using "padding:10px" you simply use the following:

Problem solved. This CSS style also works for Yahoo and Gmail, which is good enough for me as far as coverage is concerned. You can never cover every single email client in the world; so why not just cover the biggest ones like Gmail, Yahoo, and Hotmail?

Questions? Let me know!