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:

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.
Immagine esplicative di un box model STANDARD

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!

indietro