Spacing Out Blocks of Text in WordPress

The WordPress Text Editor: TinyMCE

In the administration area of WordPress, the text editor that you actually type into when writing posts is actually a javascript platform called TinyMCE. By most accounts it’s a pretty nice WYSIWYG editor that really gets the job done, but it’s not without some complaints.

A common complaint amongst WordPress bloggers is the inability to space out blocks of text. You can put as many returns between your paragraphs as you want, you aren’t going to get them, and TinyMCE is to blame. Every time you press return in a blog post, TinyMCE puts the text above it into paragraph (<p>) tags. Pressing returns multiple times should get you bunch of empty paragraph tags, which would result in several line breaks, but empty paragraph tags are intentionally removed by TinyMCE. Even if you manually add <br /> tags, they will be removed before the post is published.

You should be handling your spacing with CSS anyway

TinyMCE is actually just trying to be helpful and save you from yourself. Spacing out content is a design decision, not a content decision. And what is the guiding theory behind CSS? CSS separates content from design. If you want more spacing between your paragraphs, do it in your CSS.

Margin-bottom

This is all it takes:

p {
   margin-bottom: 1.5em;
}

Since each block of text in your post will be automatically wrapped in a paragraph tag, adding some margin-bottom will handle the spacing nicely. You could also use padding here, since paragraphs are block-level elements.

By the way, the same space-stripping applies to comments. Comments are treated in the same way as posts though, with paragraph tags around blocks of text, so the margin-bottom you apply for formatting your posts will work in your comments as well. Consider this a favor to your commentors. If they want to break up their comments into paragraphs, they should be able to do so and have it displayed properly.

Under the hood.

If you have a really good reason why you need to be able to add line breaks in your posts, you do have some options. This thread over at the WordPress forums details some edits to code that might be able to get the job done for you. All of the solutions boil down to the fact that hard returns in your posts are saved to the database as “/n” and they can be converted into break tags if need be.

If you absolutely must…

<p>&nbsp;</p>

Putting that inside your posts will force an extra line break if you absolutely need it. But don’t tell anybody I told you.

For a few more WordPress-specific CSS Tricks, check out my recent article on my favorites.

Written by Chris Coyier from CSS-Tricks
Posted on December 1st, 2007 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

5