The guide to create your Web site on Internet

margin-top, margin-bottom, margin-right, margin-left

Property

Value:	margin-width \| inherit
Initial:	0
Applies to:	all elements except elements with table display types other than table and inline-table
Inherited:	no
Percentages:	refer to width of containing block
Media:	visual
Computed value:	the percentage as specified or the absolute length

Examples

margin: 0em	=>	Example text
margin-top: 2em	=>	Example text
margin-bottom: 2em	=>	Example text
margin-right: 2em	=>	Example text
margin-left: 2em	=>	Example text

margin

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

Value:	margin-width{1,4} \| inherit
Initial:	see individual properties
Applies to:	all elements except elements with table display types other than table and inline-table
Inherited:	no
Percentages:	refer to width of containing block
Media:	visual
Computed value:	see individual properties

Examples

margin: 0em 0em 0em 0em	=>	Example text
margin: 3em 0em 1em 1em; (top=3em,right=0em,bottom=1em,left=1em)	=>	Example text

padding-top, padding-right, padding-bottom, padding-left

Property These properties set the top, right, bottom, and left padding of a box.

Value:	padding-width \| inherit
Initial:	0
Applies to:	all elements except elements with table display types other than table, inline-table, and table-cell
Inherited:	no
Percentages:	refer to width of containing block
Media:	visual
Computed value:	the percentage as specified or the absolute length

Examples

padding: 0em	=>	Example text
padding-top: 2em	=>	Example text
padding-bottom: 2em	=>	Example text
padding-right: 2em	=>	Example text
padding-left: 2em	=>	Example text

padding

Property 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.

Value:	padding-width{1,4} \| inherit
Initial:	see individual properties
Applies to:	all elements except elements with table display types other than table and inline-table
Inherited:	no
Percentages:	refer to width of containing block
Media:	visual
Computed value:	see individual properties

Examples

padding: 0em 0em 0em 0em	=>	Example text
padding: 3em 0em 1em 1em; (top=3em,right=0em,bottom=1em,left=1em)	=>	Example text

border-top-width, border-right-width, border-bottom-width, border-left-width

Property These properties set the width of the top, right, bottom, and left border of a box

Value:	border-width \| inherit
Initial:	medium
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	absolute length; '0' if the border style is 'none' or 'hidden'

Examples

border:solid; border-top-width: 1;	=>	Example text
border:solid; border-right-width: 1;	=>	Example text
border:solid; bottom-top-width: 1;	=>	Example text
border:solid; border-left-width: 1;	=>	Example text
border:solid;	=>	Example text

border-width

Property This 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.

Value:	border-width \| inherit
Initial:	see individual properties
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	see individual properties

Examples

border:solid; border-width: thin;	=>	Example text
border:solid; border-width: thin thick;	=>	Example text
border:solid; bottom-width: thin thick medium;	=>	Example text
border:solid; border-width: 1;	=>	Example text

border-top-color, border-right-color, border-bottom-color, border-left-color

Property The border color properties specify the color of a box's border.

Value:	color \| transparent \| inherit
Initial:	the value of the 'color' property
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	when taken from the 'color' property, the computed value of 'color'; otherwise, as specified

Examples

border:solid; border-top-color: green;	=>	Example text
border:solid; border-right-color: green;	=>	Example text
border:solid; bottom-top-color: green;	=>	Example text
border:solid; border-left-color: green;	=>	Example text
border:solid ;border-color: green;	=>	Example text

border-color

Property The 'border-color' property sets the color of the four borders

Value:	[ color \| transparent ]{1,4} \| inherit
Initial:	see individual properties
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	see individual properties

Examples

border:solid; border-width: green;	=>	Example text
border:solid; border-color: blue green red yellow;	=>	Example text

border-top-style, border-right-style, border-bottom-style, border-left-style

Property The 'border-style' property sets the style of the four borders

Value:	border-style \| inherit none : No border; the border width is zero. hidden : Same as 'none', except in terms of border conflict resolution for table elements. dotted : The border is a series of dots. dashed : The border is a series of short line segments. solid : The border is a single line segment. double : The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'. groove : The border looks as though it were carved into the canvas. ridge : The opposite of 'groove': the border looks as though it were coming out of the canvas. inset : The border makes the box look as though it were embedded in the canvas. outset :The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.
Initial:	none
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	as specified

Examples

border-top-style: none;	=>	Example text
border-top-style: dotted;	=>	Example text
bottom-top-style: groove;	=>	Example text
border-top-style: ridge;	=>	Example text
border-top-style: inset;	=>	Example text

border-style

Property The 'border-style' property sets the style of the four borders. It can have from one to four values, and the values are set on the different sides

Value:	border-style{1,4} \| inherit
Initial:	see individual properties
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	see individual properties

Examples

border-style: dotted;	=>	Example text
bottom-style: groove;	=>	Example text
border-style: ridge;	=>	Example text
border-style: inset;	=>	Example text
border-style: outset;	=>	Example text

border-top, border-right, border-bottom, border-left

Property This is a shorthand property for setting the width, style, and color of the top, right, bottom, and left border of a box.

Value:	[ border-width \|\| border-style \|\| 'border-top-color' ] \| inherit
Initial:	see individual properties
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	see individual properties

Examples

border=solid;border-width:thin; border-top: thick solid green;

Example text

border

Property The 'border' property is a shorthand property for setting the same width, color, and style for all four borders of a box

Value:	[ border-width \|\| border-style \|\| 'border-top-color' ] \| inherit
Initial:	see individual properties
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	see individual properties

Examples

border-top: groove red; border-right: solid green;
border-bottom: ridge blue; border-left: solid yellow;

Example text

For complete reference see CSS Style reference at W3C
80..1 80..2 80..3 81..1 81..2 82..1 82..2 83..1 84..1 84..2 85..1 85..2 86..1 87..1
87..2 88..1 89..1 8A..1 8C..1 8E..1 8G..1 8K..1 8N..1 8P..1 8S..1 8T..1 8X..1