Positioning Elements: Difference between revisions
Jump to navigation
Jump to search
| Line 2: | Line 2: | ||
You can adjust three aspects of box with CSS: | You can adjust three aspects of box with CSS: | ||
# Border | # Border - Set thickness, style, and color of the border | ||
# Margin - Set distance between this box and adjacent elements | |||
# Margin | # Padding - Set distance of content from border of box | ||
# Padding | |||
=== Box Border === | === Box Border === | ||
| Line 14: | Line 11: | ||
Border has three associated properties: | Border has three associated properties: | ||
==== Width ==== | |||
Width includes: | |||
* thin | * thin | ||
* medium | * medium | ||
* thick | * thick | ||
* any unit (ems, px, %, etc) | * any unit (ems, px, %, etc) | ||
==== Style ==== | |||
Style includes: | |||
* none | * none | ||
* hidden | * hidden | ||
| Line 30: | Line 32: | ||
* inset | * inset | ||
* outset | * outset | ||
==== Color ==== | |||
Color includes any color value. | |||
==== Shorthand Stylin ==== | ==== Shorthand Stylin ==== | ||
Revision as of 22:33, 19 May 2008
Box Model
You can adjust three aspects of box with CSS:
- Border - Set thickness, style, and color of the border
- Margin - Set distance between this box and adjacent elements
- Padding - Set distance of content from border of box
Box Border
p103
Border has three associated properties:
Width
Width includes:
- thin
- medium
- thick
- any unit (ems, px, %, etc)
Style
Style includes:
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Color
Color includes any color value.
Shorthand Stylin
p105
Box Padding
p106
Box Margins
p106
Sizing the Box
p109
Position Property
p112
Static Positioning
p112
Relative Positioning
p113
Absolute Positioning
p114
Fixed Positioning
p115
Positioning Context
p116
Floating and Clearing
p117
Float Property
p117
Clear Property
p119
Display Property
p122