back to top

CSS: Box Model

A partire da questa lezione iniziamo a parlare delle proprietร  CSS per lโ€™attribuzione degli stili agli elementi, a comprenderne il significato e ad esaminarne le casistiche di utilizzo. Il primo passo in tal senso lo faremo parlando di box model, cioรจ di quellโ€™insieme di regole che determinano lโ€™aspetto degli elementi di tipo block.

Elementi blocco e in linea

Iniziamo col dire che gli elementi della pagina possono essere distinti in due grandi famiglie:

  • Elementi block-level โ€“ Si tratta di elementi normalmente utilizzati come contenitori in quanto, per loro natura, sono idonei a contenere altri elementi di tipo blocco o inline. Un tipico elemento di questa famiglia รจ il <div>. Una caratteristica tipica di questi elementi รจ che gli si possono assegnare dimensioni esplicite; in mancanza di dimensioni predefinite, tali elementi occuperanno tutta la larghezza disponibile (la larghezza del loro contenitore) e tutta lโ€™altezza resa necessaria da ciรฒ che contengono.
  • Elementi inline โ€“ Si tratta di elementi che, per loro natura, sono idonei a contenere altri elementi inline ma non di tipo block (uno <span>, ad esempio, puรฒ contenere uno <strong> ma non un <div>!). Questi elementi non possono avere dimensioni esplicite in quanto il loro ingombro sarร  determinato solo dal loro contenuto.

Da un punto di vista pratico possiamo notare che mentre gli elementi di tipo block producono un ritorno a capo, quelli di tipo inline no: questo significa che, salvo stilizzazioni ad hoc, gli elementi block possono essere impilati uno sotto allโ€™altro, mentre quelli in linea si affiancano.

Unโ€™altra osservazione importante riguarda lโ€™utilizzo di questi elementi: a causa della loro natura, gli elementi block sono utilizzati per definire la struttura del sito, mentre gli elementi inline riguardano il contenuto.

Il box model

Abbiamo giร  detto che col temine "box model" si fa sinteticamente riferimento a quellโ€™insieme di regole che servono per definire la presentazione dei box. Per meglio comprendere questo concetto (molto importante) si faccia riferimento a questa immagine:

Box Model

Quella che รจ rappresentata nellโ€™immagine qui sopra รจ la struttura del box model. Osservandola con attenzione possiamo renderci conto che il bostro box si compone di diversi elementi:

  • lโ€™area dei contenuti (in rosa);
  • un (eventuale) padding (azzurro);
  • un (eventuale) bordo (verde);
  • un (eventuale) magine (grigio).

Questi quattro elementi, possiamo dire, costituiscono lo scheletro del nostro box.

Si noti, ancora, che in questa rappresentazione i vari elementi costitutivi del box-model sono stati rappresentati con colori differenti ma ciรฒ non deve trarre in inganno. Lโ€™area di contenuto, nella pratica, ha lo stesso colore di sfondo del suo padding in quanto questโ€™ultimo รจ la distanza interna che separa i contenuti dallโ€™eventuale bordo, si tratta di una sorta di spaziatura interna e si distingue dal margin che, viceversa, rappresenta la spaziatura esterna (cioรจ quella esterna allโ€™eventuale bordo del box) utilizzata per separarare i diversi elementi della pagina.

Il problema delle dimensioni nel box-model

Uno dei problemi tipici e piรน comuni di chi inizia a lavorare coi CSS รจ comprendere il sistema per il calcolo delle dimensioni dei box. Stando alle regole del W3C lโ€™ingombro del box รจ dato dalla somma di tutti questi quattro elementi, quindi:

larghezza area contenuti + padding + border + margin

Se noi, ad esempio, definiamo un box con questo stile:

.box {
  width: 400px;
  padding: 10px;
  border: 5px solid #000;
  margin: 20px;    
}

il suo ingombro complessivo dovrร  essere calcolato in questo modo:

400 + ((10 + 5 + 20) * 2)

per un totale calcolato di 470 pixel.

Si noti che le dimensioni di padding, border e margin sono moltiplicate per due in quanto, ovviamente, si aggiungono tanto alla sinistra quanto alla destra dellโ€™area contenuti.

La formula che abbiamo utilizzato ci รจ servita per calcolare lโ€™ingombro complessivo del nostro box, tuttavia se avessivo voluto calcolare solo lโ€™ingombro dellโ€™area "visibile" (ovvero il box fino al suo bordo compreso) avremmo dovuto effettuare i calcoli escludendo i margini.

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).