Il diagramma qui sopra mostra un modello di formattazione stile 'scatole cinesi'. Come puoi vedere, ci sono 4 'scatole': il 'content' cioe' contenuto, il 'padding' cioe' imbottitura, il 'border' cioe' bordo ed il 'margin' cioe' margine. Ogni scatola ha 4 lati: un lato top cioe' alto, un lato left cioe' sinistro, un lato right cioe' destro ed un lato bottom cioe' basso. Un content puo' avere opzionalmente un padding, un border ed un margin. Osservando il modello in senso orario, le proprieta' padding e margin sono:

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

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

Puoi specificare le loro dimensioni. Esempi:

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

Comunque, invece di:

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 }

Potresti usare delle abbreviazioni: 'padding' per la proprieta' padding e 'margin' per la proprieta' margin. Percio' l' esempio qui sopra potrebbe anche essere scritto cosi':

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

Infatti, come puoi vedere, ci sono 4 valori per la proprieta' padding e 4 valori per quella margin. Se specifichi solo un valore, questo viene applicato a tutti e 4 i lati. Sespecifichi solo 2 o 3 valori, i valori mancanti sono presi dai lati opposti. Esempi:

body { margin : 2em } /* tutti i margini sono impostati a 2em */

body { margin : 2em 4em } /* margin-top e' impostato a 2em, margin-right e' impostato a 4em. Margin-bottom e' impostato a 2em (osserva il lato opposto) e margin-left e' impostato a 4em (osserva il lato opposto) */

body { margin : 2em 4em 6em } /* margin-top e' impostato a 2em, margin-right e' impostato a 4em, margin-bottom e' impostato a 6em e margin-left e' impostato a 4em (osserva il lato opposto) */

Per quanto riguarda border, le regole sono le stesse gia' discusse per padding e margin, ma c'e' una differenza: qui puoi definire width ( cioe' ampiezza), style (cioe' stile) e color (cioe' colore). I valori di width possono essere: thin, medium, thick oppure un valore numerico. I valori di style possono essere: none, dotted, dashed, solid, double, groove, ridge, inset and outset. I valori di color possono essere: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Esempi:

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

Infine, ci sono altre 4 proprieta': width, height, float e clear. Esempi:

IMG.icon { width : 100px }

IMG.icon { height : 100px }

IMG.icon { float : left }

h1 { clear : left }

Significa che puoi specificare la larghezzza o ampiezza (width) e l' altezza (height) di un elemento. Inoltre, tramite la proprieta' float, puoi spostare un elemento a sinistra o a destra (l' esempio qui sopra mostra un' immagine spostata a sinistra). Tramite la proprieta' clear, puoi specificare se un elemento ammette altri elementi floating ('fluttuanti') ai suoi lati. Se specifichi left (sinistra), l' elemento non ammette elementi futtuanti a sinistra, e viceversa.