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.

EXAMPLE:
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.

Share This!

Related Posts

8 Comments

  1. Billy Jo on September 12, 2009 at 11:22 am

    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. Tsquare on March 5, 2010 at 7:03 pm

    Great Blog!……There’s always something here to make me laugh…Keep doing what ya do 🙂

  3. geonerstiem on June 29, 2011 at 1:21 am

    thanks

  4. Crystal on January 10, 2013 at 3:23 pm

    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!

  5. Shannon Max MacMillan on March 28, 2013 at 7:01 pm

    Great post!

  6. Jenn on February 3, 2018 at 6:20 am

    This is the absolute bane of my existence… I spend more time on this than any other issue with wordpress. When is your solution arriving!?

  7. Larry on February 18, 2018 at 1:01 pm

    I have been banging my head trying to figure out how to do this. THANK YOU!!!

  8. Sunka on May 7, 2018 at 2:30 am

    Hi! Thank you! Very helpful!

Leave a Comment





Training + Tools Digest

Join Our weekly email List

Branding & Website Design

DONE-FOR-YOU MARKETING SYSTEMS

BESTSELLER BOOK LAUNCH Services

AuthorUp-Logo

A ONCE-IN-A-LIFETIME EXPERIENCE

AuthorUpLive event shows you how to LAUNCH your book with the HIGHEST degree of success.

Content Marketing Strategies

Free

HOW TO GET A BETTER WEBSITE CONVERSION

Free

JOIN AMBER'S FACEBOOK GROUP

Free

FAST TRACK TIP VIDEOS

Free