Positioning Elements

From GotOpinion
Revision as of 22:33, 19 May 2008 by Paul (talk | contribs) (Box Model)
Jump to navigation Jump to search

Box Model

You can adjust three aspects of box with CSS:

  1. Border - Set thickness, style, and color of the border
  2. Margin - Set distance between this box and adjacent elements
  3. 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

Back to Cascade Style Sheets