HTML Basics:
Icon: FrontPage Express 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
    FrontPageTo subtopics OR Icon: FPXFPX Arrow - Subtopic open
            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-footprintSave Non-Web Image
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics




In FPX, if an image has the align attribute, there is a black bar, called an anchor, on the line before the text starts. This line 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 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 into 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 horizontal space = to the left and right of the image.

VSPACE sets 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">

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