Tip: Setting CSS margin around the pics in blog posts
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:
Related Posts
- CSS Tip: Increasing readability of your blog in one easy step
- Lynda.com’s blogging tutorial
- Generate FavIcons from your own pics
- Popular Posts
- Box.net - Nice flash widget for your blog
4 Responses
to “Tip: Setting CSS margin around the pics in blog posts”
1 Trackback(s)
- Jan 9, 2008: AdesBlog.com » CSS Tip: Increasing readibility of your blog in one easy step
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.
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.
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!