HTML Basics:
Icon: FrontPage Align & Space Images

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

You might reasonably expect that the text on a web page would just wrap around an image. It is not that simple.

You must add the ALIGN attribute to the IMG tag to make the text wrap around an image. The tag might look something like:

<img src="fish.gif" align="left" width="50" height="50">

Fish aligned at left

Image aligned left makes text wrap.

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    FrontPage/FPXTo subtopics
    Images in HTML Arrow - Subtopic open
    Icon: FrontPage FrontPage Arrow - Subtopic open OR FPXTo subtopics
    icon-footprintInsert Image
    icon-footprintMore Images
    icon-footprintInline Images
    icon-footprintReplace Image
    icon-footprintImage Link
        Align & Space
    icon-footprintAlign Images
        Image Issues
    icon-footprintSave to New Location
    icon-footprintEdit/Convert Image
    icon-footprintPictures Bar
    icon-footprintPublish Web
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics




In FrontPage when you show the marks, an anchor  symbol, Icon: Anchor for image at left or Anchor for image at right, shows where the image code actually sits when the align attribute is set to left or right. The direction of the anchor shows the alignment of the image.

The anchor symbol does not show in a browser or in print. Sometimes it is helpful to drag the image to a new location by dragging this anchor instead of dragging the image itself.

Aligning an image:

List of possible ALIGN values for an imageThe table below shows the values for ALIGN that you will use the most for images. There are some other values, but in most situations the results are the same as with one of values listed.

TipThe values allowed for aligning an image are not the same values as ALIGN has for paragraphs. It's a bit confusing at first.



How it looks in IE:


Places the image on the left margin and wraps text around it on the right Example: image aligned left


Places the image on the right margin and wraps text around it on the left

Example: image aligned right


Aligns top of image with the top of the tallest thing on the line

Example: image aligned top


Aligns the bottom of the text line with the middle of the image

Example: image aligned middle


Aligns the bottom of the image with the line that the text is on, which is called the baseline.

Default value.

Example: image aligned bottom


Did you notice that there is no ALIGN value that will center the image horizontally? To do that you must center the paragraph that contains the image. Yes, it's a bit awkward.


In the examples in the table above, the image bumps right up next to the text. A little blank space around the image would keep it from feeling so crowded.

You can add blank space around an image with two attributes in the IMG tag. The space is measured in pixels.

hspace sets equal horizontal space to the left and right of the image.

vspace sets equal vertical space above and below the image.

Example, setting both hspace and vspace:

<img src="fish.gif" align="left" hspace="10" vspace="15" width="50" height="50">

Unfortunately, you cannot set space to just one side or to just the top or bottom with these attributes.

Adding space around an image:

The table below shows how you can use these attributes to create white space around an image. In the example images, the picture of the fish is selected, so that the handles show at the corners and sides of the image. These handles (the small squares) show you exactly where the white space is.

Attribute = "Value"



hspace="0" and vspace="0"
or are not set

No extra space beside image.

Normal line spacing.

Example: no space around the image


20 pixels of white space on both the left and right of the image.

Normal line spacing.

Example: horizontal space around an image


No extra space to right or left of image.

20 pixels of white space above and below image.

Example: vertical space added around image

hspace="20" vspace="20"




20 pixels of white space on all sides of image and text wraps around the white space.

(More text has been added to show the wrapping.)

Example: both horizontal and vertical space added around image