Box Properties and Values

Below are style properties and values for boxes. (I've included here only properties now supported by Internet Explorer and Netscape -- I'll add others when they are supported)

Commonly Used Properties and Values for Cascading Style Sheets

Table Legend
Supported in Internet Explorer 3.x Supported in Internet Explorer 4.x Supported in Netscape 4.x	pt = points in = inches cm = centimeters px = pixels em = height of element's font (the em unit is not yet widely supported and should be used with caution)

	Property	Description	Values	Example
Box and Margin Properties
	margin-left (not inherited)	Sets distance from left edge of page	size (pt, in, cm, px)	{ margin-left: 1in }
	margin-right (not inherited)	Sets distance from right edge of page	size (pt, in, cm, px)	{ margin-right: 1in }
	margin-top (not inherited)	Sets distance from bottom of previous element	size (pt, in, cm, px)	{ margin-top: -20pt }
	margin-bottom (not inherited)	Sets distance from top of next element	size (pt, in, cm, px)	{ margin-bottom: 20pt }
	margin (not inherited)	Sets margins on all four sides of an element (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.)	size (pt, in, cm, px) or percentage of font size in the order: top, right, bottom, left	{ margin: .5cm .5cm 1cm .5cm }
	padding (not inherited)	Sets padding on all four sides of an element's contents (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.)	size (pt, in, cm, px) or percentage of font size in the order: top, right, bottom, left	{ padding: .5cm .5cm 1cm .5cm }
	padding-top (not inherited)	Sets padding on the top of an element's contents	size (pt, in, cm, px) or percentage of font size	{ padding-top: 5pt }
	padding-right (not inherited)	Sets padding on the right of an element's contents	size (pt, in, cm, px) or percentage of font size	{ padding-right: 5pt }
	padding-bottom (not inherited)	Sets padding on the bottom of an element's contents	size (pt, in, cm, px) or percentage of font size	{ padding-bottom: 5pt }
	padding-left (not inherited)	Sets padding on the left of an element's contents	size (pt, in, cm, px) or percentage of font size	{ padding-left: 5pt }
	border-top-width (not inherited)	Sets the width of the border along the top of an element	size (pt, in, cm, px); thin, medium, thick	{ border-top-width: thin }
	border-right-width (not inherited)	Sets the width of the border along the right of an element	size (pt, in, cm, px); thin, medium, thick	{ border-right-width: thin }
	border-bottom-width (not inherited)	Sets the width of the border along the bottom of an element	size (pt, in, cm, px); thin, medium, thick	{ border-bottom-width: thin }
	border-left-width (not inherited)	Sets the width of the border along the left of an element	size (pt, in, cm, px); thin, medium, thick	{ border-left-width: thin }
	border-width (not inherited)	Sets the width of the border on each side of an element in the order top, right, bottom, left (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.)	size (pt, in, cm, px); thin, medium, thick	{ border-width: thin thin thick thin }
	border-top-color (not inherited)	Sets the color of the border along the top of an element	color name or hex code	{ border-top-color: green }
	border-right-color (not inherited)	Sets the color of the border along the right of an element	color name or hex code	{ border-right-color: green }
	border-bottom-color (not inherited)	Sets the color of the border along the bottom of an element	color name or hex code	{ border-bottom-color: #00FF00 }
	border-left-color (not inherited)	Sets the color of the border along the left of an element	color name or hex code	{ border-left-color: thin }
	border-color (not inherited)	Sets the color of the border on each side of an element in the order top, right, bottom, left (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; note that Netscape 4.0 allows only one value)	color name or hex code	{ border-color: green #FFFF00 #00FFFF green } (IE4) { border-color: green } (IE4 or Netscape 4)
	border-top-style (not inherited)	Sets the style of the border along the top of an element	style name (none, solid, double, groove, ridge, inset, outset)	{ border-top-style: ridge }
	border-right-style (not inherited)	Sets the style of the border along the right of an element	style name (none, solid, double, groove, ridge, inset, outset)	{ border-right-style: solid }
	border-bottom-style (not inherited)	Sets the style of the border along the bottom of an element	style name (none, solid, double, groove, ridge, inset, outset)	{ border-bottom-style: groove }
	border-left-style (not inherited)	Sets the style of the border along the left of an element	style name (none, solid, double, groove, ridge, inset, outset)	{ border-left-style: inset }
	border-style (not inherited)	Sets the style of the border on all sides of an element	style name (none, solid, double, groove, ridge, inset, outset)	{ border-style: outset }
	border-top (not inherited)	Sets the width, color, and style of the border along the top of an element	width, color, and style	{ border-top: thin green ridge }
	border-right (not inherited)	Sets the width, color, and style of the border along the right of an element	width, color, and style	{ border-right: thin green ridge }
	border-bottom (not inherited)	Sets the width, color, and style of the border along the bottom of an element	width, color, and style	{ border-bottom: thin green ridge }
	border-left (not inherited)	Sets the width, color, and style of the border along the left of an element	width, color, and style	{ border-left: thin green ridge }
	border (not inherited)	Sets the width, color, and style of the border on all sides of an element	width, color, and style	{ border: thin green ridge }
	float (not inherited)	Causes the element to float to one side and other text to wrap around it. (Used in DIV and SPAN elements.)	left, right, or none	{ float: left }
	clear (not inherited)	Specifies whether the element can have floating elements around it -- causes the element to be positioned below any floating elements on the side specified.	left, right, or both	{ clear: left }