GeoffKnagge.com

Block Display Properties

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

Valuelength | percentage | auto
Initial0
Used with all elements
Inherited no
Percentages relative to the width of the parent element
Example H1 { margin-top: 2em }

margin

Value [length | percentage | auto ]
[length | percentage | auto ]
[length | percentage | auto ]
[length | percentage | auto ]
Used with all elements
Inherited no
Percentages relative to the width of the parent element
Example BODY { margin: 2em }
BODY { margin: 1em 2em }

This specifies the size of the top, right, bottom and left margins, in that order. If one value is given, it applies to all sides. If there are two or three, the values of the opposite sides are used for the missing ones.

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

Valuelength | percentage
Initial0
Used with all elements
Inherited no
Percentages relative to the width of the parent element
Examples P { padding-top: 0.3em }
P { padding-right: 10px }
P { padding-left: 20% }

padding

Value [length | percentage ] [length | percentage ]
[length | percentage ] [length | percentage ]
Used with all elements
Inherited no
Percentages relative to the width of the parent element

Specifies the size of the top, right, bottom and left paddings, in that order. If one value is given, it applies to all sides. If there are two or three values, the values of the opposite sides are used for the missing ones.

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

Valuethin | medium | thick | length
Initialmedium
Used with all elements
Inherited no
This property sets the width of an element's border.

border-width

Value [thin | medium | thick | length] [thin | medium | thick | length] [thin | medium | thick | length] [thin | medium | thick | length]
Used with all elements
Inheritedno
If one value is given, it applies to all borders. For two values, the first is applied to the top and bottom, the second to the sides. If three values are specified, they apply to the top, sides, bottom respectively. If four values are given, they are assigned to the top, right, bottom and left respectively.

border-color

Valuecolor, color, color, color
Initial the element's color
Used with all elements
Inheritedno

The 'border-color' property sets the color of the four borders. The number of values specified produces the same results as for border-width.

border-style

Valuenone | dotted | dashed | solid | double | groove | ridge | inset | outset
Initial none
Used with all elements
Inheritedno

The values for this element are specified, as for border-width. Some values which may not be self-explanatory include solid (solid line), double(double line) and groove, ridge, inset and outset, which produce 3D effects

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

Valueborder-xxx-width || border-style || color
Used with all elements
Inheritedno

Sets the appearance of the border for the given side.

border

Valueborder-width || border-style || color
Used with all elements
Inheritedno

The 'border' property is a shorthand method for setting the same width, color and style on all four borders of an element.

width

Valuelength | percentage | auto
Initialauto
Used with block-level and replaced elements
Inherited no
Percentage values relative to width of parent element

Sets the width of an element, scaling it if necessary.

height

Valuelength | auto
Initialauto
Used with block-level and replaced elements
Inherited no

Sets the height of an element.

float

Valuenone | left | right
Initial none
Used withall elements
Inheritedno
ExampleIMG { float: left;}

Moves the element towards one side, wrapping text around it.

clear

Valuenone | left | right | both
Initial none
Used withall elements
Inheritedno
This property lists the sides where floating elements are not accepted.
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.