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

Add a margin-right to the image.

.imageclass
{
  margin-right: 3px;
}

Answer 2

Add either:

• margin-left or padding-left to the text, or
• margin-right or padding-right to the image

It's difficult to say what would be better without seeing your CSS / XHTML.

Answer 3

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.

Answer 4

If adding a margin-right to the image makes the text simply show up underneath, then you need to increase the size of the parent container.

If the total width of the 2 components is larger than the size of the parent container, one of them goes to the next line.

Code examples on

<div class="parentDiv">
    <div class="image">
        **image here (assume it's 100px wide)**
    </div>
    <div class="otherText">
       **text here**
    </div>
</div>

This won't work because image size + image margin + otherText width > parentDiv width. It will cause text to go to the next line:

.parentDiv
{
    width: 500px;
}

.image
{
    float: left;
    margin-right: 3px;
}

.otherText
{
    float: left;
    width: 400px;
}

This will work:

.parentDiv
{
    width: 510px;
}

.image
{
    float: left;
    margin-right: 3px;
}

.otherText
{
    float: left;
    width: 400px;
}

Answer 5

Just ran into this yesterday. If you're planning on using a border around the image, be sure to use margin properties instead of padding, or you'll wind up with whitespace between the border of the image and the image itself.

Answer 6

.image {
  padding-right: 10px
}