White space around image

Question

I have some text around an image that has been floated left. But the text goes right up against the border of the image. How do I make some white space around it?

At the moment I've got in the CSS:

.image {
  float:left
}

and the view:

<% if article.newspic.exists? %> 
        <div class ="image">
        <%= newspic_thumbnail_tag(article) %>
        </div>
    <% end %>

  <%= simple_format(article.body) %><br>

If I add a margin-right to the image, then the text will simply start from under the image.

Answer 1

Adding a margin-right should work in this case but I've had issues with margins and floats before, particularly when dealing with negative margins but you also have issues with collapsing margins. That may or may not be the behaviour you want. Often I've ended up defensively enclosing floated content in a div and using padding instead as the results tend to be more intuitive.

Also IE7 doesn't handle negative margins larger than the content width so you have to use enclosing elements in that case. Here is an example of that technique.