Wordpress Inline Images - Does it ignore the right margin values?

Question

I'm using the WooThemes Original News Theme (It was free!) and I'm doing some edits. I have some images inline in my entries and what happens is that the text and images are pretty much right up against each other. I managed to get it fixed (somewhat) when the images are on the right side of the entry by adding a 5px border around the image using this code in the CSS:

.entry img { 
    padding: 2px 2px 2px 2px;
    background:#FFF;
    border: solid 5px #FFF;
    }

It works on the left, but the right seems to get pushed underneath the text.

But I just realized that my images have a caption box around them using the class "wp-caption," could that be a possible source of my problems?

Appreciate the help!

Answer 1

margin: 10px !important;

might do the trick.

Alternatively, make the CSS more specify by using this kind of thing

 body #foo .entry img { 
    padding: 2px 2px 2px 2px;
    background:#FFF;
    border: solid 5px #FFF;
    }

choosing an appropriate ID instead of #foo of course.

Answer 2

As others mentioned, set a margin on the image. You may want to add some CSS rules for the alignleft and alignright classes; these are added by the WordPress image selector when you click its 'Align Left' or 'Align Right' buttons. Add a rule specifying a margin on the opposite side of the alignment:

.entry img.alignleft {
    margin-right: 1em;
}
.entry img.alignright {
    margin-left: 1em;
}

By the way, you should NOT use the border property to make the image stand off from the text. The border property is used to draw a border; if you change your background color, you'll find a fat white border around your image, and the text will touch that border. To make elements stand off from one another, use the margin property.