from Special Edition Using HTML 4:
Cascading Style Sheet Property Reference
by Jerry Honeycutt
Box Properties
W3C’s style sheet recommendation provides you the capability to define the borders,
margins, and padding for elements on the Web page. You can wrap a border around a
heading, for example, or change the margins of the <P> tag so that
any occurrences of this tag are indented into the page. Here’s an overview of the
properties that you can use to change the boxes associated with an element:
| Border | You use the border properties to set the left, right, top, and bottom borders of an element. You can set the border’s width, color, and style. |
| Margin | You use the margin properties to set the left, right, top, and bottom margins of an element. With these properties, you only specify the size of the margin. |
| Padding | You use the padding properties to specify how much space the browser displays between the border and the content of the element. With the padding properties, you only specify the size of the margin. |
Figure B.1 shows you how the border, margin, and padding properties work with
the height and width properties to form the boxes around the element.
The following list describe these in more detail:
- The height and width properties determine the overall size
of the element’s containing box.
- The margin properties determine the element’s margins within its containing box.
- The border properties determine the position of the border within the element’s
margins.
- The padding properties determine the amount of space between the element’s border
and the contents of the element itself.
You can group border properties in five different ways. You can specify the properties
for a particular side of the element, using border-top, border-right,
border-bottom, or border-left. You can also specify all sides of
the border at one time by using border.
With any of these attributes, you specify the width, style, and color of the border,
as in the following example:
border-top: thin dotted black
FIG. B.1
Four boxes are actually around each element.
You can group the margin properties using margin. You specify the top,
right, bottom, and left, like this:
margin: .5in 1in .5in 1in
You can also group the margin properties using padding. You specify the
top, right, bottom, and left padding values, like this:
padding: .25in .25in .25in .25in
If you specify only one value, the browser uses that value for all sides. If you
leave out one or more values, the browser takes the missing value from the opposite
side. For example, if you leave off the last value (left), the browser sets the left
padding to the value you specified for the right margin.
border-bottom-width
You set the width of the bottom border by using the border-bottom-width
property. This doesn’t affect the other sides of the border. You can assign any of
the values described in Table B.4 to this property.
Table B.4 border-bottom-width Values
| Value | Description |
| thin | Displays the border by using a thin line. |
| medium | Displays the border by using a medium line. |
| thick | Displays the border by using a thick line. |
| length | You can define the exact width of the border by using points (pt), inches (in), centimeters (cm), or pixels (px); (for example, 2in). |
border-color
The border-color property sets the color of the element’s border. You
can use a named color, such as RED, or you can use an RGB value, such as
#FF0000.
border-left-width
You set the width of the left border by using the border-left-width property.
This doesn’t affect the other sides of the border. You can assign any of the values
described in Table B.6 to this property.
border-right-width
You set the width of the right border by using the border-right-width
property. This doesn’t affect the other sides of the border. You can assign any of
the values described in Table B.6 to this property.
border-style
The border-style property determines the style of the border that the
browser displays. You can specify from one to four values for this property:
| One Value | All four borders are set to the style. |
| Two Values | The top and bottom borders are set to the style in the first value, and the left and right borders are set to the style in the second value. |
| Three Values | The top border is set to the style in the first value; the right and left borders are set to the style in the second value; and the bottom border is set to the style in the third value. |
| Four Values | The top border is set to the style in the first value; the right border is set to the second value; the bottom border is set to the third value; and the left border is set to the fourth value. |
Table B.5 describes the values you can use for a border’s style.
Table B.5 border-style Values
| Value | Description |
| none | No border. |
| dotted | Dotted line drawn over the top of the element. |
| dashed | Dashed line drawn over the top of the element. |
| solid | Solid line. |
| double | Double line drawn over the top of the element; the width of the two lines and the space between them equals the border-width value. |
| groove | 3-D groove drawn in colors based upon color. |
| ridge | 3-D ridge drawn in colors based upon color. |
| inset | 3-D inset drawn in colors based upon color. |
| outset | 3-D outset drawn in colors based upon color. |
border-top-width
You set the width of the top border by using the border-top-width property.
This doesn’t affect the other sides of the border. You can assign any of the values
described in Table B.7 to this property.
TROUBLESHOOTING: I’ve set the width of my border, but it still doesn’t
display. Setting the width of the border isn’t enough. You also have to set the
border style by using the border-style property because the default style
for every border is none.
clear
The clear property determines whether the browser can display floating
elements on the sides of an element. The property’s value indicates the sides on
which floating elements are not allowed. For example, clear: left means
that the browser can’t float elements on the left side of the element. Table B.6
describes the values you can assign to this property.
Table B.6 clear Values
| Value | Description |
| none | Floating elements are allowed on all sides. |
| left | Floating elements are not allowed on the left. |
| right | Floating elements are not allowed on the right. |
| both | Floating elements are not allowed on either side. |
float
The float property specifies that the element is floated to the left
or right side, with the surrounding elements flowing around it. Table B.7 describes
the values you can assign to this property.
Table B.7 float Values
| Value | Description |
| none | Displays the element where it is |
| left | Move to the left and wrap text around it |
| right | Move to the right and wrap text around it |
height
You set the total height of the element with the height property. You
can set this property for text blocks or images. For example, you can use the height
and width properties to create a special warning on the Web page that has
a fixed size. Height is more useful with images, however. You can set this
property to any length, a percentage value, or auto, which lets the browser
determine the best size for the element.
margin-bottom
You set the bottom margin by using the margin-bottom property. You can
specify any valid length, a percentage value (relative to the height and
width) of the element, or auto, which lets the browser determine
the best margins to use for the element. You can also use a negative margin size
to create special effects such as hanging indents.
margin-left
You set the left margin by using the margin-left property. You can specify
any valid length, a percentage value (relative to the height and width)
of the element, or auto, which lets the browser determine the best margins
to use for the element. You can also use a negative margin size to create special
effects.
margin-right
You set the right margin by using the margin-right property. You can
specify any valid length, a percentage value (relative to the height and
width) of the element, or auto, which lets the browser determine
the best margins to use for the element. You can also use a negative margin size
to create special effects.
margin-top
You set the top margin by using the margin-top property. You can specify
any valid length, a percentage value (relative to the height and width)
of the element, or auto, which lets the browser determine the best margins
to use for the element. You can also use a negative margin size to create special
effects.
padding-bottom
The padding-bottom property specifies the amount of space to display
between the element’s bottom border and the element’s contents. You can set this
property to a valid length or a percentage value (relative to the height
and width) of the element.
padding-left
The padding-left property specifies the amount of space to display between
the element’s left border and the element’s contents. You can set this property to
a valid length or a percentage value (relative to the height and width)
of the element.
padding-right
The padding-right property specifies the amount of space to display between
the element’s right border and the element’s contents. You can set this property
to a valid length or a percentage value (relative to the height and width)
of the element.
padding-top
The padding-top property specifies the amount of space to display between
the element’s top border and the element’s contents. You can set this property to
a valid length or a percentage value (relative to the height and width)
of the element.
width
You set the total width of the element with the width property. You can
set this property for text blocks or images. You can set this property to any length,
a percentage value, or auto, which lets the browser determine the best size
for the element.
© Copyright Macmillan Computer Publishing. All
rights reserved.
