CSS: Boxes

The above diagram shows the box based model. As you can see, there are 4 boxes: the 'content', the 'padding', the 'border' and the 'margin'. Each box has 4 sides: a top side, a left side, a right side and a bottom side. A content can optionally have a padding, a border and a margin. In a clockwise direction, the padding and margin properties are:

padding-top, padding-right, padding-bottom and padding-left

margin-top, margin-right, margin-bottom and margin-left

You can change their sizes. Examples:

h1 { margin-top : 2em }
h1 { padding-left : 12% }

However, instead of:

body { padding-top : 2em; padding-right : 3em;

padding-bottom : 4em; padding-left : 5em;

margin-top : 6em; margin-left : 7em;

margin-bottom : 8em; margin.left : 9em }

You could use a shorthand: 'padding' for padding properties and 'margin' for margin properties. So the above example maybe:

body { padding : 2em 3em 4em 5em; margin : 6em 7em 8em 9em }

In fact, as you can see, there are 4 values for padding and 4 values for margin. If specify only one value, it applies to all sides. If you specify only 2 or 3 values, the missing values are taken from the opposite side. Examples:

body { margin : 2em } /* all margins set to 2em */

body { margin : 2em 4em } /* margin-top set to 2em, margin-right set to 4em. Margin-bottom set to 2em (look at the opposite side) and margin-left set to 4em (look at the opposite side) */

body { margin : 2em 4em 6em } /* margin-top set to 2em, margin-right set to 4em, margin-bottom set to 6em and margin-left set to 4em (look at the opposite side) */

Talking about border, rules are the same of those already discussed for padding and margin, but there is a difference here: you can define width, style and color. Width values maybe: thin, medium, thick or a numeric value. Style values maybe: none, dotted, dashed, solid, double, groove, ridge, inset and outset. Color values maybe: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Example:

h1 { border-top : thick solid red }
h1 { border : solid blue }

Finally, there are other 4 properties: width, height, float and clear. Examples:

IMG.icon { width : 100px }

IMG.icon { height : 100px }

IMG.icon { float : left }

h1 { clear : left }

So you can specify width and height of an element. Besides, by means of the float property, you can move an element on the left or on the right (the above example shows an image moved on the left). By means of the clear property, you can specify if an element allows floating elements on its sides. If you specify left, the element doesn't allows floating elements on the left, and vice versa.