Visualforce rich text input area spacing

Question

I have a rich text textarea on my vf page that I am populating with the html from an email template. Everything appears correct except the paragraph spacing is double spaced. Does anyone know how to control the vertical spacing? Is it a style element?

Answer 1

There are some inconsistencies between the rich text control and the email template html version. The template editor puts a style in the beginning to limit the

tag spacing.

<style>p{margin-top:0px; margin-bottom:0px;}</style>

I could not simply prefix the body html with the style as the rte control stripped it out. I put code in the controller for all p tag styles to include these entries. Fortunately they were all one of two standard formats.

There also appeared to be unprintable characters that caused an extra

tag in a couple places. Deleting all white space and replacing with only the required spaces and returns seems to resolve that as well.

Answer 2

<p> elements include a 1em space afterwards; it's part of the HTML specs. If you want to have single spacing, use a line break (<br />) instead.

Answer 3

I have run into the "oppossite" scenario to these multiple times (= how a rich text field sent over an email in Salesforce appears with double spacing), and it's confusing mainly because the text in the Salesforce UI (at least in Lightning Experience) looks different (nice, i.e. without extra spacing) than when that same text is sent over email using an Email Template (where the extra spacing appears).

I have found that you can actually add styling to the template that will fix this in Outlook (and possibly other, not-so-quirky email clients), but warning: it does not fix it for Gmail because styles aren't applied unless they are inline at each tag's level (!). For Outlook though, add something like p{margin-top:3px; margin-bottom:3px;} where appropriate in the template (ex: inside the parent div where you will embed the rich text field) and the email will render as you expect.