line-height for paragraph spacing not working in Yahoo Mail

Question

For some reason, line spacing is not working for separating paragraphs, when sending e-mails with this code to my yahoo mail account, or any yahoo mail account. How can I fix this?

Here's what I'm using, but isn't working:

<p style="line-height:150%">
<span style="font-family:Helvetica, Arial, sans-serif; font-size:10.5pt; line-height:150%; color:#333333; margin-bottom: 1em;">Caro [Membro],</span>
</p>
<p style="line-height:150%">
<span style="font-family:Helvetica, Arial, sans-serif; font-size:10.5pt; line-height:150%; color:#333333; margin-bottom: 1em;">Estou escrevendo com uma atualização importante para os membros de N sobre o Programa de Garantia de Obrigações CDFI.</span>
</p>

Looks like this:

line-spacing e-mail problem

How do I fix this? Hell, I even put a margin-bottom on it, and that doesn't even seem to work!

What is the equivalent of `150%` in `px` or `em`? And are you referring to the `line-height` or the `margin-bottom`? — Solomon Closson, Mar 21 '13 at 16:48
@Raffael - I'm trying 1.5 em for the line-height right now, I doubt it will make a difference, but I'm hoping for the best! Will let you know. — Solomon Closson, Mar 21 '13 at 16:56
@Raffael - As I thought, this does not make any difference, still the same results! :( — Solomon Closson, Mar 21 '13 at 16:58
I'm going to test it using `
` tags instead of `
` hoping this renders better with a `margin-bottom: 1.5em;` and `line-height: 1.5em;` What are your thoughts on doing this? You think it is better? — Solomon Closson, Mar 21 '13 at 18:05
I don't see a reason why Yahoo should handle ps different than divs. Good luck. — Raffael, Mar 21 '13 at 21:57

score 0 · Answer 1 · answered Dec 09 '14 at 13:40

I would advise you not to use <p> in HTML email. In general I would use <tr><td> instead. Optionally you may wish to use <br>, but I don't.

<p> varies quite a lot in each web based email/email client, and is much harder to standardise than <td>.

To perfectly line up the space between paragraphs, I think the most consistent option is to use a transparent image to control the height of the <tr><td>. It should look something like this:

<tr>
  <td>Lorum Ipsum</td>
</tr>
<tr>
  <td height=3px"><img src="http://www.example.com/img/3px.png" alt="" height="3px" />
  </td>
</tr>
<tr>
  <td>Lorum Ipsum</td>
</tr>
<tr>
  <td>Lorum Ipsum</td>
</tr>

3px.png would be a 3px transparent image. If you create emails often enough you will end up with a collection of heights of transparent pngs.

score 0 · Answer 2 · answered Oct 27 '17 at 04:57

The problem is in the Line Height Setting in your Word Processor. To fix this problem:

1) Open your Word Processing program. 2) Open your Document. 3) Go to Edit. 4) Go to Select All. 5) Go to Format. 6) Go to Paragraph. 7) Go to Line Spacing 8) Select Proportional 9) Set to 150% 10) Click OK 11) Paste the Text into your Email Program.

line-height for paragraph spacing not working in Yahoo Mail

2 Answers2