20

Mar

Space between paragraphs in Wordpress

Filed Under (Tricks) by picker on 20-03-2009

Tagged Under : , ,

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 has been my choice, but you can alter this value until satisfied.

Hope this can help!

Bookmark and Share
Permalink

Comments:

9 Responses to “Space between paragraphs in Wordpress”

  1. Eric on 21 Apr 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

  2. Handy Polymath » Blog Archiv » If it’s broke, fix it already. on 22 Apr 2009 at 10:22 pm #

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

  3. People, Places and Possesions (boring title) | JynxedPanda-Sphere on 9 May 2009 at 3:08 pm #

    [...] 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 [...]

  4. Gemini on 4 Nov 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?

  5. picker on 17 Nov 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.

  6. Katrina Rasbold on 7 Feb 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.

  7. picker on 14 Feb 2010 at 9:40 pm #

    @Katrina - You’re very welcome!

  8. Kat on 30 Mar 2010 at 11:16 am #

    This hasn’t worked for me :-(
    I changed both css files - for frontend and backend. ..

  9. Mike on 25 May 2010 at 1:34 pm #

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

Leave a Reply