Positioning Elements
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 Dimensions
Box Border
p103
The border properties specify the width, color, and style of the border area of a box. These properties apply to all elements.
Width
Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', and 'border-width'
The border width properties specify the width of the border area. The properties defined in this section refer to the <border-width> value type, which may take one of the following values:
- thin
- A thin border.
- medium
- A medium border.
- thick
- A thick border.
- <length>
- The border's thickness has an explicit value. Explicit border widths cannot be negative.
The interpretation of the first three values depends on the user agent. The following relationships must hold, however:
'thin' <='medium' <= 'thick'.
Furthermore, these widths must be constant throughout a document.
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.
The properties defined in this section refer to the <padding-width> value type, which may take one of the following values:
- <length>
- Specifies a fixed width.
- <percentage>
- The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.
Box Margins
p106
Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'
Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.
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