Positioning Elements: Difference between revisions
Jump to navigation
Jump to search
New page: == Box Model == === Box Border === p103 === Box Padding === p106 === Box Margins === p106 == Sizing the Box == p109 == Position Property == p112 === Static Positioning === p112... |
|||
| Line 1: | Line 1: | ||
== Box Model == | == 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 === | === Box Border === | ||
p103 | p103 | ||
Border has three associated properties: | |||
# Width, includes: | |||
* thin | |||
* medium | |||
* thick | |||
* any unit (ems, px, %, etc) | |||
# Style, includes: | |||
* none | |||
* hidden | |||
* dotted | |||
* dashed | |||
* solid | |||
* double | |||
* groove | |||
* ridge | |||
* inset | |||
* outset | |||
# Color, includes any color value | |||
==== Shorthand Stylin ==== | |||
p105 | |||
=== Box Padding === | === Box Padding === | ||
Revision as of 22:24, 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, includes:
- thin
- medium
- thick
- any unit (ems, px, %, etc)
- Style, includes:
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- 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