Close

Stefano Picker

Product Manager Team Leader Tech Executive Entrepreneur MBA with Honors Competitive Swimmer Ironman Triathlete Certified AcroYogi

Web Site Under Construction

Some content is still from the template demo.

Please excuse the appearance, and come back soon!

Space between paragraphs in WordPress

March 20, 2009 Tricks padding, paragraph, wordpress

Used to the flexible and advanced CMS Joomla, I found WordPress an ideal tool for blogging in a quick and ready-to-go way. Just to mention one aspect, Joomla doesn’t natively support comments but requires the installation of a dedicated extension.

On the other side of the coin, WordPress can be less supportive when you look for advanced features and settings.

I initially couldn’t view the true html code of my posts, and the built-in editor used to cut tags like <br/>. So I installed the plugin TinyMCE Advanced Editor, which gave me more flexibility and control. But I still couldn’t have a custom space between paragraphs…

Unsatisfied with some work-around solutions found out on the web, I started trying with my (improvable) CSS skills and I eventually succeeded.

Well, let’s go straight to the point. You just need to put the following lines into your WordPress theme style.css file:

p{
padding-bottom:7px;
}

This simple instruction puts a padding of 7 pixels every time you close a paragraph with the tag </p> (which is exactly what happens when you press the enter button in the visual view). Of course 7 pixels have been my choice, but you can change this value until satisfied.

Hope this helps!

15 Comments on “Space between paragraphs in WordPress

Godoi
August 17, 2011 at 10:17 PM

Nice, thanks mem

Siobhan
March 27, 2011 at 12:11 AM

Thanks so much for this simple but elegant fix!

WebmasterTroi
February 10, 2011 at 6:19 AM

This information is so valuable! I cannot thank you enough for posting this article sir! I have many clients that I’ve built WordPress sites for, and I’ve looked everywhere imaginable to find an answer to the infamous question: “How do I make spaces between paragraphs in WordPress?” This is the only thing that works and works effectively!

Nice Work!

Troi

Tyler
December 30, 2010 at 5:20 AM

@Gemini – to prevent excess space all you have to do is hold down shift+enter. Then your text would show

Start Wars 1977
Star Wars is really awesome

If you hit enter without holding the shif than wordpress inserts a paragraph tag, which in your case isn’t what you want (because you’re going for less space and not more).

To Picker, thanks for the cool tip!

Cindy
September 5, 2010 at 12:56 PM

THANK YOU!!! All of a sudden I didn’t have spaces between my paragraphs without manually putting them there, it was probably a plugin, but I couldn’t find it! I have searched everywhere trying to find this simple solution…works perfectly! All of my old posts have the breaks in them where they’re supposed to again!

Mike
May 25, 2010 at 1:34 PM

Thanks for this, easiest solution I have found and improved my CSS skills too.

Kat
March 30, 2010 at 11:16 AM

This hasn’t worked for me 🙁
I changed both css files – for frontend and backend. ..

picker
February 14, 2010 at 9:40 PM

@Katrina – You’re very welcome!

Katrina Rasbold
February 7, 2010 at 2:51 AM

You are the BEST. I have been struggling like mad with this problem and the insertion of your .css instruction fixed things in a matter of seconds. Thank you, thank you, thank you.

picker
November 17, 2009 at 1:22 PM

@Gemini – I think you should just use “br” instead of “/p” (in the html editor). This way, your paragraph won’t be closed and no padding will be applied.

Gemini
November 4, 2009 at 8:34 PM

Now to the opposite question: how do you REMOVE unwanted spaces between lines?

I’m doing a listicle with movie titles, and am trying to write something like this:

Star Wars, 1977
Star Wars was really awesome.

But instead, it looks like this:

Star Wars, 1977

Star Wars was really awesome.

Looking at HTML editor, I don’t seem to be “telling” WP to add the space, and nothing I do will make it go away.

Can anyone help with this?

[…] on this problem since day one but wordpress support was giving no solutions until I googled this blog. Thank you so much! I wasn’t able to comment because of some error but I really do thank you […]

[…] Increased readability thanks to a simple yet fundamentally brilliant tweak. […]

Eric
April 21, 2009 at 2:01 AM

Thanks for the tip. I was so frustrated with wordpress stripping the code, but adding the code in the CSS solved the problem.

thanks

Leave a Reply

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