Alignment of Images using HTML

The code here is <img src="..." />.  Notice how the text begins immediately to the right of the image, and how the first line is aligned with the bottom of the image, leaving all this white space above the text, and how if additional lines are needed, they will wrap underneat the picture so to demonstrate this, we need to make sure we put enought text here.
The code here is <img src="..." hspace="15" /> which provides 15 pixels of on both the left and right side of the picture but we still haven't solved the problem of all the white space above the text.. The vspace attribute works similarly, providing vertical space above and below the image.
The code here is <img src="..." align="left" />  This shows the effect of adding an align="left" attribute. This starts the text at the top of the picture and produces  subsequent lines to the right of the text..

When you want text to again start below the image, you can use a <br clear="left" /> tag just before the text you want to start below the image.

What this attribute does is say go to where the left margin is clear. Alternatively, one could specify <br clear="right" />, if the picture were on the right.

Alignment of Images using CSS

The align, hspace, vspace attributes of the img tag and the clear attribute of the br tag are all deprecated, so you should strongly consider CSS alternatives.

Sample Image I have floated the image left here and thus the effect is very similar to that produced with the align property of the <img> tag. The text will continue to wrap to the next line until I use a clear property for the next element. In this particular case, it is the <p> tag but it can be applied to most anything.

This is another <p> tag here but since there is no clear property attached to it, text does not go underneath the image..

This text had the clear property applied to it.

Sample Image Here we have used the above float property but also used a margin-right property. Notice that CSS allows one control one a single side where the HTML attributes produced an effect on one side only without being able to limit it to one side only.

 

Revised: October 17, 2012; comments to William Pegram, wpegram@nvcc.edu