Positioning Elements

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

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 with four sides:

{margin: npx npx npx npx} where n = number

Example syntax with three sides:

{margin: npx Npx npx} means top, right, bottom and make left equal to right (N)

Example syntax with two sides:

{margin: npx Npx} means top, right and make bottom equal to top (n)and left equal to right (N)

Example syntax with one side:

{margin: npx} means make all four sides equal to n.

If you want a side to be zero you can write it without using px. Example:

{border: 1px 0 2px 0}

Box Padding

p106

Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'

The padding properties specify the width of the padding area of a box. The 'padding' shorthand property sets the padding for all four sides while the other padding properties only set their respective side.

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