margin-left, margin-right, margin-top, margin-bottom, margin
Value: [ <length> | <percentage> | auto ]{1,4} (for 'margin' property)
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

These properties set the margin of an element, while the 'margin' property can be used to set the border for all four sides. The other four properties only set their respective side.

For the 'margin' property, the four lengths apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.

For example :

BODY { margin: 1em 2em 3em }

and

BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em
}

would produce the same result.

padding-top, padding-right, padding-bottom, padding-left, padding
Value: [ <length> | <percentage> | auto ]{1,4}
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

These properties describe how much space is inserted between the border and the content of the element. The order is top, right, bottom, left. A single value applies to all sides, while using two or three values set the respective sides, with the missing values being copied from the opposite side.

The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right' 'padding-bottom' and 'padding-left' at the same place in the style sheet.

If four values are specified they apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.

The surface of the padding area is set with the 'background' property.

Note that 'padding' properties cannot be negative values.

border-top-width, border-right-width, border-bottom-width, border-left-width, border-width
Value: [thin | medium | thick | <length>] {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

The 'border-width' property is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width' and 'border-left-width' at the same place in the style sheet.

There can be from one to four values, with the following interpretation:

• one value: all four border widths are set to that value
  i.e.

  H1 { border-width: thin }

  all 4 'border-*-width' properties are set to 'thin'

• two values: top and bottom border widths are set to the first value, right and left are set to the second
  i.e.

  H1 { border-width: thin thick }

  border-top-width and border-bottom-width are set to 'thin', while border-right-width and border-left-width are set to 'thick'

• three values: top is set to the first, right and left are set to the second, bottom is set to the third
  i.e.

  H1 { border-width: thin thick medium }

  border-top-width is set to 'thin', while border-right-width and border-left-width are set to 'thick' and border-bottom-width is set to 'medium'

• four values: top, right, bottom and left, respectively
  i.e.

  H1 { border-width: thin thick medium none }

  border-top-width is set to 'thin', border-right-width is set to 'thick', border-bottom-width is set to 'medium' and border-left-width is set to 'none'

In the examples below, the comments indicate the resulting widths of the top, right, bottom and left borders:

border-top-color, border-right-color, border-bottom-color, border-left-color, border-color
Value: <color> | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

These properties set the border colour properties for all four borders of the element, with border-color being short hand for the other four properties. The reasoning for setting individual border colours is as for border widths, namely that 1 to 4 values can be used in the border-color property, with missing declarations using that declared for the opposite side.

border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

These properties set the border style properties for all four borders of the element, with border-style being short hand for the other four properties. The reasoning for setting individual border styles is as for border widths, namely that 1 to 4 values can be used in the border-style property, with missing declarations using that declared for the opposite side.

The various styles are as follows:

none

no border is drawn (regardless of the 'border-width' value)

dotted

the border is a dotted line drawn on top of the background of the element

dashed

the border is a dashed line drawn on top of the background of the element

solid

the border is a solid line

double

the border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the <border-width> value.

groove

a 3D groove is drawn in colors based on the <color> value.

ridge

a 3D ridge is drawn in colors based on the <color> value.

inset

a 3D inset is drawn in colors based on the <color> value.

outset

a 3D outset is drawn in colors based on the <color> value.

border-top, border-right, border-bottom, border-left, border
Value: <border-*-width> | <border-*-style> | <border-*-color> | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

The border properties can be used to globally set the border widths, styles and colours for all four borders of an element. For example, the first rule below is equivalent to the set of four rules shown after it:

P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}

Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

Since the properties to some extent have overlapping functionality, the order in which the rules are specified becomes important. Consider this example:

BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}

In the above example, the color of the left border will be black, while the other borders are red. This is due to 'border-left' setting the width, style and color. Since the color value is not specified on the 'border-left' property, it will be taken from the 'color' property. The fact that the 'color' property is set after the 'border-left' property is not relevant.

Note that while the 'border-width' property accepts up to four length values, this property only accepts one.

width
Value: <length> | <percentage> | auto
Initial: auto
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

This property can be applied to text elements, but it is most useful with inline images and similar insertions. The width is to be enforced by scaling the image if necessary, preserving the aspect ratio of the image if the 'height' property is 'auto'.

height
Value: <length> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: N/A

As above, this property can be applied to text, but it is most useful with inline images and similar insertions. The height is to be enforced by scaling the image if necessary, preserving the aspect if the 'width' property is 'auto'.

float
Value: left | right | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property is most often used with inline images, to allow floating images (c.f. <IMG ALIGN ...>

clear
Value: none | left | right | both
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property specifies if elements allow floating elements (normally images) to the left or right. With 'clear' set to 'left', an element will be moved below any floating element on the left side. (c.f. <BR CLEAR= ...>)

© 1995-1998, Stephen Le Hunte