spacing around images

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.

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.

__________________

That works too.

__________________

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