CODEWITHSUNDEEP
htmlruby-on-railscss
alamodey
alamodey

Reputation: 14938

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 {
  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.

Upvotes: 5

Views: 14245

Answers (6)

jonty
jonty

Reputation: 470

.image {
  padding-right: 10px
}

Upvotes: 3

Chris Doggett
Chris Doggett

Reputation: 20747

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.

Upvotes: 0

Zack Marrapese
Zack Marrapese

Reputation: 12080

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;
}

Upvotes: 1

cjk
cjk

Reputation: 46415

Add a margin-right to the image.

.imageclass
{
  margin-right: 3px;
}

Upvotes: 0

cletus
cletus

Reputation: 625007

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.

Upvotes: 5

WhatIsHeDoing
WhatIsHeDoing

Reputation: 539

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.

Upvotes: 0

Related Questions