Floating Image and margin [Archive]

View Full Version : Floating Image and margin

monique

06-11-2007, 10:28 AM

Hello!

When in a text you want an image to float left, but you also want to have some space between the image and the text (let's say 10px right and 10px bottom), is there a way how you can do that?

For example:

<html>
<body>

<p><img src ="logo.jpg" align ="left"> This is a paragraph with an image floating left. Now I want some space between the image and the text of 10px on the right and the bottom.</p>

</body>
</html>

Does anyone know an answer to this question please?

Thanks,
Monique

turkey1605

06-11-2007, 11:07 AM

Yes, there is a very simple solution to your problem. In the <img> tag, using the propertires VSPACE and HSPACE create a gap on the sides of the image. You can't specify exactly which sides to create the gap (unless there is a way) but it works fine!
e.g:

<img src="image1.gif" align="left" hspace="10" vspace="10">

monique

06-11-2007, 12:23 PM

Thanks! It looks indeed very nice.

But: were the hspace and vspace not depreciated in HTML4.01? I believe they are not supported by XHTML? And I try to stick to XHTML.

Is there another solution?

Veronica

06-11-2007, 03:49 PM

Padding is the space inside an element's border. Margins are the spaces outside the element's border. Which one to use depends on how your page is set up. But the way you would set the values for them is similar (except margins can be negative, padding can't).

This will set the padding for all 4 sides of the image to 10px:
<img src="smile.gif" style="width:100px; height:66px; border:0; padding: 10px;">
This will set the margin for all 4 sides of the image to 10px:
<img src="smile.gif" style="width:100px; height:66px; border:0; margin: 10px;">

You can also set the padding or margin so it's different for each side:
<img src="smile.gif" style="width:100px; height:66px; border:0; padding-top: 10px; padding-right:5px; padding-bottom:3px; padding-left:1px">

And you can just combine them into one, in order of top, right, bottom, and left. For example, if the image had a class of "picture" and you wanted to set the margin:

.picture {
margin: 10px 5px 3px 1px;
}

monique

06-12-2007, 08:28 AM

Thanks Veronica.

Since I only need the space around the images on this page, I will use the style-option, of which, I must confess, I hadn't thought of.

Sometimes you're looking for a fancy solution when a simple one is just right there in front of you! :o

monique

06-12-2007, 08:36 AM

And by the way, also when using style for an image you can combine them in one, like:

<img src="smile.gif" style="width:100px; height:66px; border:0; padding:10px 5px 3px 1px">

tech_support

06-12-2007, 08:48 AM

And I try to stick to XHTML.
Don't. It isn't supported properly in IE. Use HTML 4.01 Strict.