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.

Related Posts

Course Development

I just finished creating a “Relationship Management” Operation course (…er, what? More on that in a moment). Today’s tip video outlines how I got the

Read More »

Training + Tools Digest

Join our weekly email list

  • This field is for validation purposes and should be left unchanged.

Website Design

We build websites for Authors, Speakers and Coaches

Done-For-You Marketing Systems

Bestseller Book Launch Services

A once in a lifetime experience

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

How To Convert Qualified Buyers With Your Website

Free

How To Attract Qualified Buyers And Grow Your Following

Free

How To Launch And Leverage Your Book For Long-Term Sales Success

Free

90 Minute Webinar On Sales & Marketing Strategies

Free

Join Amber's Facebook Group

Free

Fast Track Tip Videos

Free

Get our weekly "Training & Tools Digest" to grow your tribe, live your potential, and monetize your message! Every Tuesday morning get the latest deep-dive insights to help you creatively (and simply) improve your business and life.

Try it out for one week – where should we email you?

  • This field is for validation purposes and should be left unchanged.

Your privacy is our top priority!
We collect, use and process your data in accordance
with our Privacy Policy.