Il box model

Una pagina (X)HTML è un insieme di box rettangolari, elementi blocco o elementi inline. Tutto l'insieme di regole che gestisce l'aspetto visuale degli elementi blocco viene in genere riferito al cosiddetto box model.
Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS.

Il box model è gestito da una serie di regole di base concernenti la definizione di un box e il suo rapporto con gli altri elementi:

• l'area del contenuto. E' la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash.
• il padding. E' uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento.
• il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.
• il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

Il grosso problema da tenere sotto controllo è la proprità width che indica la larghezza dell'area del contenuto vero e proprio, per es. testo; e la larghezza effettiva di un box che è la somma di:
margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro

Per saperne veramente di più vedi http://css.html.it/guide/lezione/28/il-box-model/

Box model di I.E. in quirksmode.

Il browser I.E. (specie le versioni precedenti alla 7.0) interpreta spesso il valore della proprietà width come larghezza effettiva del box, creando spiacevoli risultati!