spacing around images

[AdRock]

Is there a way i can set the space around an image so the text doesn't wrap right up next to it.

I have used hspace but it spaces out both sides and i just want to space either the left side or the right side by about 10px

I am sure it can be done becuase I have seen it done before on other websites.

I would like it so when the text wraps around underneath the image, it is all in-line and the image not looking indented.

[moojoo]

You have a few options here:

The most direct approach would be to place the image in a div with the dimensions of your image and give it the necessary margins and float if required depending on your placement.

i.e.

#foo {
width: 200px;
height:200px;
float:left;
margin:12px;
}

or #foo img {

}

may work too.

[ukgeoff]

If this a consistent requirement throughout the site then set css margins directly on the img tag.

Code: Select all

img {
   margin: set as required;
}

It's a simple as that.

[moojoo]

That works too.

[mreine]

If you use global margins for the img tag, the margins will be added to all imgs and they will look indented when the text wraps underneath during a left or right float.

You need to establish two styles. One for right floats and one for left floats. You want margin on the right and bottom sides during a left float and margins on the left and bottom sides during a right float.

Code: Select all

.float-left {
 float: left;
 margin: 0 10px 10px 0;
}
 
.float-right {
 float: right;
 margin: 0 0 10px 10px;
}