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

Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style'

The border style properties specify the line style of a box's border (solid, double, dashed, etc.). The properties defined in this section refer to the <border-style> value type, which may take one of the following values:

none: No border; the computed border width is zero.

hidden: Same as 'none', except in terms of border conflict resolution for table elements.

dotted: The border is a series of dots.

dashed: The border is a series of short line segments.

solid: The border is a single line segment.

double: The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.

groove: The border looks as though it were carved into the canvas.

ridge: The opposite of 'groove': the border looks as though it were coming out of the canvas.

inset: The border makes the box look as though it were embedded in the canvas.

outset: The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.

All borders are drawn on top of the box's background. The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used. For instance, if the 'border-color' has the value 'silver', then a UA could use a gradient of colors from white to dark gray to indicate a sloping border.

Color

Color includes any color value.

Border Color Properties

Border Property Shorthand

p105

CSS supports shorthand for borders.

Declaration order is always top, right, bottom, left. You can remember this as TRouBLe (Top, Right, Bottom, & Left). If you leave out a side CSS interprets the last side equal to the opposite side.

Example syntax without shorthand for borders:

{margin-top:3px; margin-right:3px; margin-bottom:3px; margin-left:3px;}

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.

Collapsing Margins

p108

Distance between vertical margins is collapsed. That means when a bottom margin touches a top margin the large one is the distance not the sum of them both.

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

Example Aslett Clearing Method p144

/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */

Display Property

p127

Box Tips

Set margins and padding to zero on all your style sheets to ensure your style appears consistent across browsers. You can always change the settings to your desired result.

* {margin:0; padding:0;}

Back to Cascade Style Sheets