Using Spacer Images @ OWDC

LESSON 1-07-06: Using Spacer Images

Web Design Lessons > Lesson 1-07-06: Using Spacer Images

Previous Lesson | Lesson Index | Next Lesson

This section of your free online web design course covers "spacer" images, which are basically 1x1 dimension, transparent GIF images used to create useful blank spaces in a web page.

For example if you want two objects to be a certain amount apart from each other, you can part them by placing a spacer image with a width of the desired distance inbetween these two objects.

Below is an enlarged 1x1 transparent GIF image. I've set the "width" and "height" attributes of this image as 50 pixels for you to be able to see it and save it, but it is still originally a 1x1 dimension image. Save it to your hard drive by right clicking and selecting "Save Picture As..." from the menu:

Sidenote: Make sure you save it to the same folder as you keep your HTML files, or change the filepath accordingly in the below examples.

Let's say we want to separate two pieces of text horizontally or vertically. In order to do that, we can use either tables or spacer images. Have a look at the below HTML code:

<html>
<head>

</head>
<body>

Online Web Design Course
<img src="spacer.gif" width="100" height="1">
is your totally free HTML tutorial!

</body>
</html>

In the above HTML code, "Online Web Design Course" is separated from "is your totally free HTML help!" by 100 pixels horizontally, as we have set the width of our spacer image as "100". Below is the output of the above HTML code:

Online Web Design Course

is your totally free HTML tutorial!

Sidenote: Remember to set the height of your spacer image as well as the width when setting it up. When separating items horizontally, the height of your spacer image should be "1". Similarly, if you are using the image to separate items vertically, set the width of the image to "1".

Let's do the same thing, but this time vertically:

<html>
<head>

</head>
<body>

Online Web Design Course
 
<img src="spacer.gif" width="1" height="100">
 
is your totally free HTML tutorial!

</body>
</html>

Notice that this time we have set the width of our spacer image to "1" and the height to "100" so that our texts will be 100 pixels apart *vertically*. We have also put two tags to separate our items with a line break. If we did not put the tags, our texts and image would appear in a horizontal row instead of a vertical row, so we need those tags. Below is our output:

Online Web Design Course

is your totally free HTML tutorial!

Note that you can position many types of items (i.e. images, flash animations, form elements, etc.) by using spacer images.

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

This was the last section of Lesson 1-07. Next lesson is about putting links in your HTML documents. Let's head on to Lesson 1-08!

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-05 HTML Tables
• Lesson 1-06 Background Alteration
• Lesson 1-07 Images

• Lesson 1-07-01 Inserting images into your web pages

• Lesson 1-07-02 Adding alternative text to your images

• Lesson 1-07-03 Sizing images & adding image borders

• Lesson 1-07-04 GIF vs JPEG

• Lesson 1-07-05 The PNG format

• Lesson 1-07-06 Using spacer images
• Lesson 1-08 Hyperlinking
• Lesson 1-09 Aligning Your Content

Back To Top

IMAGES!