Positioning Elements: Difference between revisions
Jump to navigation
Jump to search
| Line 10: | Line 10: | ||
p103 | p103 | ||
Three border properties specify width, color, and style of the box border area. These properties apply to all elements. | |||
==== Width ==== | ==== Width ==== | ||
| Line 37: | Line 38: | ||
Color includes any color value. | Color includes any color value. | ||
==== Shorthand | ==== Border Property Shorthand ==== | ||
p105 | p105 | ||
CSS supports shorthand for borders. | |||
Declaration order is always top, right, bottom, left. If you leave out a side CSS interprets makes the last side equal to the opposite side. | |||
Example Syntax: | |||
<pre>{margin: npx npx npx npx} where n = number</pre> | |||
Example Syntax with three: | |||
<pre>{margin: npx Npx npx} means top, right, bottom and make left (missing side) equal to N</pre> | |||
=== Box Padding === | === Box Padding === | ||
Revision as of 22:58, 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
Three border properties specify width, color, and style of the box border area. These properties apply to all elements.
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.
Border Property Shorthand
p105
CSS supports shorthand for borders.
Declaration order is always top, right, bottom, left. If you leave out a side CSS interprets makes the last side equal to the opposite side.
Example Syntax:
{margin: npx npx npx npx} where n = number
Example Syntax with three:
{margin: npx Npx npx} means top, right, bottom and make left (missing side) equal to N
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