HTML 4.0 compliance checked by http://validator.w3.org

13.2 Borders for Images and Objects

HTML 4.0 allows one to specify borders and margins for images and objects; by using style effects one can also get internal padding. Here is a systematic test of these items, collectively termed Box Properties. Each test paragraph begins with a description of what is illustrated, followed after a <BR> by a line containing text on the left, the image, and text on the right, and then after another <BR> a final line of text to show off the bottom margin.

Borders on Images

The first group of tests is on images. This is the unadorned image.
Left Picture of winged message Right
Text below the image, demonstrating the width of the bottom margin.

This image has a border: BORDER=5 (pixels).
Left Picture of winged message Right
Text below the image, demonstrating the width of the bottom margin.

This image has top and bottom margins: VSPACE=30 (pixels).
Left Picture of winged message Right
Text below the image, demonstrating the width of the bottom margin.

This image has left and right margins: HSPACE=30 (pixels).
Left Picture of winged message Right
Text below the image, demonstrating the width of the bottom margin.

This image has all of the above attributes.
Left Picture of winged message Right
Text below the image, demonstrating the width of the bottom margin.

Using a style effect, this image has a border and internal padding all around: STYLE=``border:5px;padding:30px''.
Left Picture of winged message Right
Text below the image, demonstrating the width of the bottom margin.

This image has a border and a percentage width: BORDER=5 WIDTH=50%.
Left Picture of winged message Right
Text below the image, demonstrating the width of the bottom margin.

Borders on Image Objects

The next group of tests are on objects containing images. This is the unadorned object.
LeftRight
Text below the object, demonstrating the width of the bottom margin.

This object has a border: BORDER=5 (pixels).
LeftRight
Text below the object, demonstrating the width of the bottom margin.

This object has top and bottom margins: VSPACE=30 (pixels).
LeftRight
Text below the object, demonstrating the width of the bottom margin.

This object has left and right margins: HSPACE=30 (pixels).
LeftRight
Text below the object, demonstrating the width of the bottom margin.

This object has all of the above attributes.
LeftRight
Text below the object, demonstrating the width of the bottom margin.

Using a style effect, this object has a border and internal padding all around: STYLE=``border:5px;padding:30px''.
LeftRight
Text below the object, demonstrating the width of the bottom margin.

This object has a border and a percentage width: BORDER=5 WIDTH=50%.
LeftRight
Text below the object, demonstrating the width of the bottom margin.

Borders on HTML Objects

The next group of tests are on objects containing HTML text. All of them have an explicit width of 60%. This is the unadorned object (except for the width).
LeftRight
Text below the object, demonstrating the width of the bottom margin.

This object has a border: BORDER=5 (pixels).
LeftRight
Text below the object, demonstrating the width of the bottom margin.

This object has top and bottom margins: VSPACE=30 (pixels).
LeftRight
Text below the object, demonstrating the width of the bottom margin.

This object has left and right margins: HSPACE=30 (pixels).
LeftRight
Text below the object, demonstrating the width of the bottom margin.

This object has all of the above attributes.
LeftRight
Text below the object, demonstrating the width of the bottom margin.

Using a style effect, this object has a border and internal padding all around: STYLE=``border:5px;padding:30px''.
LeftRight
Text below the object, demonstrating the width of the bottom margin.

Contents