White space around the image

Question

I have text around the image that was placed on the left. But the text goes directly against the border of the image. How do I make some free space around it?

At the moment I have CSS:

.image {
  float:left
}

and view:

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

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

If I add margin-rightto the image, the text just starts from under the image.

Answer 1

.image {
  padding-right: 10px
}

Answer 2

margin-right, , , . , . div , , , .

, IE7 , , . .

Answer 3

, .

, .

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

, + + a > . :

.parentDiv
{
    width: 500px;
}

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

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

:

.parentDiv
{
    width: 510px;
}

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

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

Answer 4

.

.imageclass
{
  margin-right: 3px;
}

Answer 5

:

• margin-left padding-left
• margin-right padding-right

, , CSS/XHTML.

Answer 6

Just stumbled upon it yesterday. If you plan to use a frame around the image, be sure to use the properties of the field instead of filling, or you will get spaces between the border of the image and the image itself.