Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

il Box Model

3 luglio 2011, Scritto da , category css

Le attuali pagine (X)HTML, contrariamente alla “vecchia scuola” che prevedeva di utilizzare le tabelle per creare layout, sono costituite da un insieme di blocchi rettangolari, affiancati, annidati, sovrapposti etc.

Questi blocchi rettangolari sono composti da elementi di tipo blocco o inline.

Gli elementi di tipo block sono quelli che “spezzano” il flusso di disposizione degli oggetti, in sostanza, mandano a capo l’elemento che segue. Tipico esempio di un elemento blocco è il paragrafo, il div, la form.

Gli elementi di tipo inline, invece, sono quelli che “non mandano a capo”. I tag <strong>, <img>, <em>, per esempio, sono elementi di tipo inline.

Ogni box è composto da più parti, tutte personalizzabili tramite CSS!

css box model htmlNell’immagine a fianco è possibile comprendere quali siano le parti che compongono il box model.

L’elemento più interno è l’area del contenuto, quella, cioè, dove il testo (o altre immagini o elementi html) vengono inserite. Il contenuto non può superare le dimensioni di tale area.

Le caratteristiche dell’area sono l’altezza e la larghezza.

Subito al di fuori dell’area del contenuto abbiamo il padding. Per padding si intende lo spazio che è presente tra il bordo del box model e l’inizio dell’area del contenuto appena spiegata.

Il bordo del box model è, dunque, una linea che circonda l’area del contenuto più il padding.

Rimane il margin (margine) che è lo spazio variabile che separa un box da un altro.

Concettualmente potremmo spiegare il padding come il cellpadding visto per le tabelle in HTML ed il margin come il cellspacing. Analogamente il bordo del box model è il border che si può impostare per la tabella.

Dimensioni del box model

Sulla base di quanto appena scritto si deduce che le dimensioni del box model si ottiene dalla seguente formula:

area del contenuto + padding + border + margin

Considerando, inoltre, che sono personalizzabili sia la larghezza che l’altezza di tutti gli elementi sopra citati, ecco che la giusta formula sarà:

larghezza = margin left + border left + padding left + width + padding right + border right + margin right

altezza = margin top + border top + padding top + height + padding bottom + border bottom + margin bottom

L’immagine seguente, pertanto, avrà le seguenti dimensioni:

dimensioni box modellarghezza = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px

altezza = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

E’ anche possibile non specificare le dimensioni, lasciando in modo che sia il browser a calcolarne le giuste dimensioni. In questo caso si utilizza il valore “auto” che consente al browser di calcolare le dimensioni di margin, height e width sulla base della risoluzione dello schermo o della finestra del browser

Oltre ad auto è anche possibile utilizzare, in alcuni casi, valori negativi. Non è insolito, per esempio per nascondere parte di contenuto, utilizzare il margine negativo, a questa maniera:

p {margin-top: -50px} /*nascondo le prime tre righe di testo */