How to Add Spacing in WordPress for HTML and Visual Editors

wordpressI have done a lot of researching about the WordPress spacing issues that can sometimes get in our way. Primarily when you switch from HTML view to Visual view, you’ve noticed that your spacing is removed. Then you’d have to go back into the HTML view to add in the <br/> tags, or you try to add spacing in Visual. Please see below for what I discovered and how to get around that issue:

First, here’s what I discovered. Yes, when you switch between HTML and Visual all spacing, center, and paragraph tags are stripped. WordPress is created on a very specific and new type of code called XHTML which is similar to standard HTML code, but with a few new rules designed to make your website viewable from any Internet browser and version (FireFox, Internet Explorer, Safari, etc.). This XHTML code can cause ‘dehydration’. Meaning if you are editing an existing page, and are not working in the HTML view of a page/post, it will strip all spacing (dehydrating the page).

So, solutions? There really aren’t any great solutions. WordPress is in process of creating one. So are we. One of our programmers is planning to develop a plug-in that will allow us to do what we want. But, until then…

1) I found a spacing tag that cannot be stripped. If I add <br style=”height:1.5em” /> instead of <br/> then that space will stay there, no matter how much I go back and forth from HTML view to Visual view. I would add that tag at the end of a paragraph (not between paragraph text).

EXAMPLE (correct):
Here is my paragraph of text. Isn’t it neat? <br style=”height:1.5em” />

Yes it is!

EXAMPLE (incorrect):
Here is my paragraph of text. Isn’t it neat?
<br style=”height:1.5em” />
Yes it is!

We can change the 1.5em number and increase that is we want more space. You can do 2em, 3em, 4em, 5em, 6em, etc. We would type in a number, preview, and then tweak if necessary and then when we have it right, go to visual and finish our editing.

2) This is a solution that you can use in Visual view. Let’s say you have 2 blocks of text and you want a space between them.

Here is one paragraph.
Here is the other paragraph.

We would add a period (.) in between the paragraphs and highlight that period, make the font white so it appears as nothing on the actual live page.

Ultimately, I found out that in the Visual Editor, only 1 space is allowed. You can do this with either Enter or Space+Enter. Either way, only one space between block of text is allowed. If you want 3 spaces, then you either need to adjust in HTML or add those periods on 3 different lines, make them white and move on with editing. If you do 1 space, this will show up in preview and when you publish (this has been tested and proven). If you do more, it won’t show up in preview or publish.

Have any additional ideas to add? Shoot me a comment! I’d love to hear your thoughts.

8 thoughts on “How to Add Spacing in WordPress for HTML and Visual Editors

  1. Billy Jo

    Finally – I’ve been trying to get an answer to this for a while. I see what you mean about not having any ‘great’ solutions out there. Thanks for the tip. I’ll try what you suggest!

  2. Crystal

    I cannot tell you how much I appreciate this post! I do not know HTML at all but have figured out most of the basics of WordPress except how to add spaces which was driving me crazy! Thanks so much!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human: *

This site uses Akismet to reduce spam. Learn how your comment data is processed.