Tip: Setting CSS margin around the pics in blog posts

leave comment 
Posted in » Tutorials - by Ades on May 6th, 2007

Do you hate when the picture that you post inside the blog post sticks to the text? Would you like to have that nice empty space around your pictures?

Well that’s fairly easy to do. I thought this might be helpful to some of you guys. In order to do this you just have to insert one line of CSS code into your style.css (WordPress: Presentation > Theme Editor > style.css)

That code is this: .photo {padding: 3px 15px 3px 0;}
You can change the name of the CSS style to anything you want, I just set it to .photo so that it’s easier to understand.

How to apply

After you have inserted the CSS code to your style.css, next step is to apply this style to your images inside the post. Just add these two codes inside your img tag align=’left’ class=’photo’ as shown below:

<img src=’/images/image.jpg’ align=’left’ class=’photo’ />

How to remember

This is a general tip to memorize the sequence of the positions: Just remember the word TRouBLe and you will be fine. As long as you don’t forget the word ‘trouble’, you won’t have trouble with the positions. Below is the graphical representation:

[Post to Twitter]  [Post to Delicious]  [Post to Digg]  [Post to StumbleUpon] 


Related Posts



6 Responses to “Tip: Setting CSS margin around the pics in blog posts”

  1. By EngLee on May 7, 2007

    Typically the publishers will not put a space there to get more clicks on ads, if that’s an advertisement. But your suggestion certainly a good thing to do, if you are only talking about pictures.

  2. By Ades on May 9, 2007

    Yes I was just suggesting from the design perspective. Because sometimes I see people insert images to their posts and it makes it difficult to read.

  3. By JJMelo on Jan 22, 2008

    Another quick way of remembering the sequence of positions is picturing a clock going from noon to midnight….12…3…6…9…. that always helps me!

  4. By Cheap Mobile Calls on Dec 1, 2008

    It’s a great way to lay out your page more clearly and looks a lot more presentable. I will certainly take this tip on board!

  5. By clickonpost on Dec 17, 2009

    Thanks very useful tip.. I really need this.

  1. 1 Trackback(s)

  2. Jan 9, 2008: AdesBlog.com » CSS Tip: Increasing readibility of your blog in one easy step

Post a Comment