White space around image

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

and the view: If I add a margin-right to the image, then the text will simply start from under the image. asked Apr 14, 2009 at 12:06 14.8k 25 25 gold badges 88 88 silver badges 116 116 bronze badges

6 Answers 6

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.

1 1 1 silver badge answered Apr 14, 2009 at 12:20 623k 169 169 gold badges 916 916 silver badges 945 945 bronze badges

Also watch out for the double margin bug when applying margins to floated elements. That's if you support IE6, of course.