Free Wordpress Help | Image And Paragraph Spacing In Wordpress Posts

Ask me a question at the Wordpress Ninja Forum

 

Image And Paragraph Spacing In Wordpress Posts

Posted on August 13, 2008
Filed Under Wordpress Solutions |

You may have noticed how some themes don’t look so good when you insert an image into a post and align it somehow e.g. align to the left or right or top or bottom. Many Wordpress themes have no image spacing so the inserted images are tucked right up against the text which just looks ugly and unprofessional. The Prosense theme is a fantastic theme, but unfortunately suffers from this spacing problem as well as other themes i have seen, so i thought this issue deserves a post of it’s own.

Fortunately its an easy fix. Start off by editing your style.css file which is found in your /wp-content/themes/<your theme name>/ folder. Find any references to “img” and/or “.alignleft” or “.alignright”. The only parts you need to be worried about is the alignleft for images and the alignright for images. The biggest problem we have is all themes seem to be different in how they reference the image alignment. Prosense theme for instance has no img.alignleft or img.alignright rather it just has a section for .alignleft and .alignright, so its a little confusing in that sense. Other themes might have img.alignleft etc. So you may end up doing a bit of trial and error to find which section controls your post images, but if you use what i explained here as a good guideline then you should be ok. Im happy to look at anyone’s theme if you still get stuck finding the image alignment sections in the style.css file.

Once you find them, you need to adjust the padding settings i.e. make sure it has a padding setting that will reflect the spacing you want. Remember from my previous post on layouts how to use padding, that we can specify the pixel white space on each side of the imaginary container - in this case the image is the container. It is totally up to you what kind of padding you prefer though i generally go with something like this:

img.alignleft {
padding: 4px 8px 4px 2px;
}

img.alignright {
padding: 4px 2px 4px 8px;
}

NB: Remember the notation order for the padding - Top, right, bottom, left

Paragraph spacing is a slightly different beast, which some themes don’t have built in. The spacing i am referring to here is the vertical whitespace between paragraphs i.e. carriage returns between paragraphs. You can force carriage returns in your posts, though the best and quickest way to get whitespace between paragraphs is via the style.css file. You need to find any reference to the entry text i.e. “.entry”. Here is an example of the kind of code you are looking for:

.entry {
margin-bottom: 10px;
text-align: justify;
}

This code will correctly display whitespace (similar to a carriage return) between paragraphs. The key line which you probably already guessed, is the margin-bottom command. This tells the code to leave 10 pixels between paragraphs, though you could change this to any size you like.

Save the style.css file and upload to your host overwriting the old version. As usual, make sure you already have backups just in case something goes wrong.

That’s all there is to it.

Comments

20 Responses to “Image And Paragraph Spacing In Wordpress Posts”

  1. Shane on December 16th, 2008 6:44 pm

    Thanks for sharing this! I just went through and fixed the padding on my alignleft and alignright to make my pages look nicer. I had to end up leaving an old “.post img” set for the images that were added in using the < 2.5v of WP. Thanks again!

  2. A beginner on January 19th, 2009 3:23 pm

    Thanks for the post. Got the perfect fix juxt in time.

  3. Pinna on January 21st, 2009 12:13 pm

    I want to display only 4 lines of every post in home page. how to work with word press.
    pls guide me.

    Thanks

  4. Tyler on January 23rd, 2009 9:07 pm

    I wrote an easy tutorial about this. It’s easy, I mean “cut and paste” easy to get some extra space between your paragraphs. And it doesn’t require modifying your CSS file. Check it out!

    http://tystips.com/archives/54/how2-insert-space-between-paragraphs-in-wordpress-without-using-br-and-p-tags/

    I hope this helps your readers.

  5. Peter Corbett on February 16th, 2009 4:11 am

    Worked perfectly. Thank you!

  6. firefly on March 2nd, 2009 6:01 pm

    hi paul. hope u can assists me in my postings when it comes to this alignment / wrapping of images on my post / excerpts.

    you can find my blog site here

    http://buhay-noypi.com/noypi_blogs

    i am having a hard time in fixing this.

    your help would be very much appreciated

    thank you

    firefly

  7. WPNinja on March 2nd, 2009 11:18 pm

    Firefly,

    what exactly is the problem? What is wrong with your alignment in particular?

  8. firefly on March 3rd, 2009 3:59 pm

    actually, the space on the right portion of the picture i have inputted ( via excerpts ) is being wasted. i want the text to be near ( right portion of the picture to maximize the space.

    thanks

  9. WPNinja on March 3rd, 2009 11:15 pm

    Firefly,

    If you want the text to flow around the image e.g. image on the left and text to the right of it and underneath, then you need to choose the alignment when you insert the image to the post. Basically you need to select ‘Left’ alignment to get this result. If your theme still doesn’t work with left alignment let me know.

  10. replica handbags on December 23rd, 2009 2:09 am
  11. Ajithkumar on January 30th, 2010 8:32 am

    Hi,

    I tried to edit the style.css , but there are no ‘entry’ command over there, should I then just add the code that you gave me to increase the space between paragraphs?

    I used this command in the html mode and it worked, but I have many people working for me, and I can’t ask them to do this every time they create an article, can you suggest me how to get solve this issue. I have issues with only two themes, rest of my sites are perfect. Please check my sites and help me. http://www.universalages.com and http://www.financialages.com are the two sites that have this issue

  12. Chandrashekhar on February 4th, 2010 10:43 am

    Thanks a lot. saved my time.Thanks for tutorial.
    http://techchand.org

  13. Masdin on February 9th, 2010 5:12 am

    Thank you very much for the explanation. But I have another problem with image and paragraph spacing. When I set the image in my post to align-left, the second paragraph of the post occur after the image, so there is a long space between first paragraph and second paragraph. You can check the problem in my post example => http://masdinsite.info/2010/02/my-first-payment-proves-shorttask-not-scam/

    I really need help to fix this paragraph spacing because I love use the current theme.

    Thanks in advance Ninja….

  14. wholesale china on April 26th, 2010 8:25 am

    Thank you very much! This was very helpful.

  15. ed hardy sale on May 3rd, 2010 2:29 am

    Thank you for the information

  16. Ajit on May 21st, 2010 7:44 am

    Thanks. It saved my time. It was very helpful.

  17. 642-067 on May 28th, 2010 3:39 am

    Pass4sure certification exam

  18. Jignesh on June 4th, 2010 7:42 pm

    That Was gr8 post

    Really Helped In writing Sms and Tips..

    Thanks A ton

  19. cheap ed hardy on July 5th, 2010 12:54 am

    We’r one of the most profession ed hardy of the coolest and latest ed hardy apparel, such as ed hardy tee ,ed hardy bags, ed hardy caps, ed hardy Polos, ed hardy hoodies, ed hardy men T-shirt and more. We offers a wide selection of fashion cheap ed hardyproducts. Welcome to our shop or just enjoy browsing through our stunning collection available wholesale ed hardy in our shop; our goal is to delight you with our distinctive collection of mindful ed hardy products while providing value and excellent service. Our goal is 100% customer satisfaction and we offer only 100% satisfacted service and ed hardy products. Please feel free to contact us at any time; we are committed to your 100% customer satisfaction. If you’re looking for the best service and best selection, stay right where you are and continue shopping at here is your best online choice for the reasonable prices. So why not buy your ed hardy now, I am sure they we won’t let you down.

  20. Ajit on July 17th, 2010 9:43 pm

    Thank you very much for this article. It helped me lot.

Leave a Reply




 

Related Posts: