Intervenendo sulla cornice, spazio intorno, distanza tra, … di ogni sezione si crea l’effetto box molto interessante 
div { border: 4px dashed #000080; margin: 40px; padding: 10px; }
Si ottiene che ogni sezione è incorniciata con
- border: 4px dashed #000080, bordo tratteggiato blu di 4 pixel
- margin: 40px, margine di 40 pixel (distanza della sezione dai vicini)
- padding: 10px, spaziatura di 10 pixel (distanza del contenuto dal bordo)
margin
Con margin si specifica la distanza della sezione dagli elementi contigui
- margin, distanza unica
- margin-top margin-left margin-bottom margin-right, specifica della singola distanza
- margin: ... ... ... ..., distanze top, right, bottom, left rispettivamente
Si potrebbe, al limite, scegliere una distanza diversa da ogni vicino
.centrato { margin:50; ... }
.giustificato { margin-left:100; ... }
.adestra { margin: 100 150 200 250; ... }
Padding
Con padding si specifica la distanza del contenuto dalla cornice con le stesse possibilità di margin
- padding, distanza unica
- padding-top padding-left padding-bottom padding-right, specifica della singola distanza
- padding ... ... ... ..., distanze top, right, bottom, left rispettivamente
Si possono anche specificare 2 distanze (top-bottom, left-right) o 3 (top, left-right, bottom)
border
Per il bordo di un blocco ci sono infinite possibilità di personalizzazione!
Stile
- border-top-style border-right-style border-bottom-style border-left-style
- border-style, none, dotted, dashed, solid, double, groove, ridge, inset, outset
Spessore
- border-top-width border-right-width border-bottom-width border-left-width
- border-width, thin, medium, thick, ...
Colore
- border-color, da 1 a 4 colori (come padding)
Insieme
Dimensioni
Anche le dimensioni della sezione sono configurabili tramite
- width, larghezza
- height, altezza
sia con valori assoluti, px, che relativi, %.
Annidando le sezioni e cambiando colore di fondo/dimensioni si ottengono risultati interessanti.
Ma ci sono differenze tra i browser!
Overflow
Quando l’altezza o la larghezza della sezione è insufficiente per il contenuto i browser adattano la dimensione al contenuto in modo arbitrario.
Con overflow si può stabilire quale sarà il trattamento di questa situazione
Le opzioni sono
- visible, le dimensioni devono essere cambiate affinché …
- hidden, le dimensioni rimangono fisse e quindi…
- scroll, compare una barra di scorrimento
- auto, comportamento di default del browser
Ci sono differenze tra MS IE e Firefox!