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
Value: [ <length> | <percentage> | auto ]{1,4}
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

This property describes 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 surface of the padding area is set with the 'background' property.

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

These properties set the border of an element. As with the above properties, the 'border' property sets the border for all four sides while the other properties only set their respective side.

The border is drawn in the image pointed to by the URL. If no URL is specified, or when the image is not available, the colour value is used.

If an image is specified and found through the URL, it will be used as a texture (i.e. repeated throughout the border) to draw the border. The <color> value, if specified, will be used to fill transparent portions of the image and while the image is loading

If no <color> value is expressly specified for the element border, the value of the 'color' property will take its place:

<border-width>
Possible values are [thin | medium | thick | <length>], defaulting to 'medium'.
The keyword widths are constant throughout a document:

<border-style>
Possible values are [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ], defaulting to 'none'

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= ...>)


Text properties Properties and Values Classification properties