| Box Model |
| Name |
Syntax |
Possible values |
Example |
N |
E |
V |
I |
Notes |
| margin-top |
margin-top: <value>; |
<length> | <percentage> | auto |
margin-top: 0 ; |
4 |
4 |
1 |
N |
negative values are permitted.
Percentage refers to the parent elements width. |
| margin-right |
margin-right: <value>; |
margin-right: 0 ; |
| margin-bottom |
margin-bottom: <value>; |
margin-bottom: 0 ; |
| margin-left |
margin-left: <value>; |
margin-left: 0 ; |
| margin |
margin: <value>; |
<length> | <percentage> | auto |
margin: 20px, 10px ; |
4 |
4 |
1 |
N |
negative values are NOT permitted.
Percentage refers to the parent elements width.
See how value quantities get interpreted
|
| padding-top |
padding-top: <value>; |
<length> | <percentage> |
padding-top: 0 ; |
4 |
4 |
1 |
N |
negative values are NOT permitted.
Percentage refers to the parent elements width. |
| padding-right |
padding-right: <value>; |
padding-right: 0 ; |
| padding-bottom |
padding-bottom: <value>; |
padding-bottom: 0 ; |
| padding-left |
padding-left: <value>; |
padding-left: 0 ; |
| padding |
padding: <value>; |
<length> | <percentage> | auto |
padding: 20px, 10px ; |
4 |
4 |
1 |
N |
negative values are NOT permitted.
Percentage refers to the parent elements width.
Value quantities are interpreted as follows:
See how value quantities get interpreted
|
| border-top-width |
border-top-width: <value>; |
thin | medium | thick | <length> |
border-top-width: 30 ; |
4 |
4 |
1 |
N |
Initial values: medium (IE), 0 (NN) |
| border-right-width |
border-right-width: <value>; |
border-right-width: medium ; |
| border-bottom-width |
border-bottom-width: <value>; |
border-bottom-width: medium ; |
| border-left-width |
border-left-width: <value>; |
border-left-width: medium ; |
| border-width |
border-width: <value>; |
<length> | <percentage> | auto |
border-width: 20px, 10px ; |
4 |
4 |
1 |
N |
Initial values: medium (IE), 0 (NN).
Value quantities are interpreted as follows:
See how value quantities get interpreted
|
| border-color |
border: <value>; |
<color> |
border-color: blue; |
4 |
4 |
1 |
N |
It is recommended to use only browser safe colors
NN accepts only one value.
IE interprets value quantities as follows:
See how value quantities get interpreted
|
| border-style |
border-style: <value>; |
none | dotted | dashed | hidden | solid | double | groove | ridge | inset | outset |
border-style: double; |
4 |
4 |
1 |
N |
Values supported by both IE and NN:
none, solid, double, groove, ridge, inset, outset
Dashed and dotted are rendered as "solid" by both. IE4 for Macs renders both accurately.
"hidden" is part of CSS2 and is not supported yet.
NN accepts only one value.
IE interprets value quantities as follows:
See how value quantities get interpreted
|
| border-top |
border-top: <value>; |
<border-top-width> || <border-top-style> || <color> |
border-top: 30 ; |
4 |
4 |
1 |
N |
negative values are permitted.
Percentage refers to the parent elements width. |
| border-right |
border-right: <value>; |
border-right: 10% ; |
| border-bottom |
border-bottom: <value>; |
border-bottom: 20 ; |
| border-left |
border-left: <value>; |
border-left: auto ; |
| border |
border: <value>; |
<border-width> || <border-style> || <color> |
border: solid red 5px; |
n/a |
4 |
1 |
N |
Buggy. To stabilize attribute specify both border-width and border-style. |
| width |
width: <value>; |
<length> | <percentage> | auto |
width: 20%; |
4 |
4 |
1 |
N |
Very buggy. |
| height |
height: <value>; |
<length> | <percentage> | auto |
height: 120; |
4 |
4 |
1 |
- |
Very buggy. |
| float |
float: <value>; |
left | right | none |
float: right; |
4 |
4 |
1 |
N |
Extremely buggy.
Can be used for sections of text as well as images.
For images stick to the ALIGN attribute. |
| clear |
clear: <value>; |
none | left | right | both |
clear: both; |
4 |
4 |
1 |
N |
Interpreted differently by browsers. |
