CSS  »  Articoli  »  CSS Template e layout 

In questo articolo cercheremo di spiegare a fondo la teoria del box model. Iniziamo con il dire che ogni elemento in una pagina html può avere margini, bordi e padding. Ecco un esempio:

Il box che stiamo considerando è quello con il bordo nero solido. La distanza tra il suo bordo e il suo contenitore (con bordo tratteggiato) è il margin. Il bordo nero solido è il border. Infine, la zona grigia che circonda il contenuto (in giallo) è il padding.

Nota: dall' esempio si potrebbe intendere che ai margini, bordi e padding si possa attribuire un colore. In realtà il colore si può assegnare solo ai bordi e al contenuto. Altra cosa da considerare: i margini orizzontali sono sempre trattati separatamente, mentre i margini verticali tra due elementi adiacenti vengono collassati, cosa che molti non sanno. Consideriamo per esempio il seguente codice html con stili in linea:

<div style="margin: 100px">Primo div</div>
<div style="margin: 50px">Secondo div</div>

Il primo div ha tutti i margini pari a 100px, mentre il secondo div ha margini di 50px. Quale sarà la distanza verticale che li separa? Molti penseranno che sia 150 pixels. In realtà la distanza che li separa è 100 pixels. Infatti la distanza verticale effettiva tra due elementi con margini diversi da zero viene resa come il maggiore tra i due valori dei margini verticali coinvolti.

Elementi inline ed elementi block-level

Molti non hanno chiara la differenza tra queste due categorie, ed è sovente causa di errori di codifica di html e css. Cercherò di spiegarla al meglio. Vediamo le differenze sostanziali:

• Un elemento block-level può contenere altri elementi block-level e anche elementi inline, mentre un elemento inline può contenere solo altri elementi inline
• Ad un elemento block-level si possono attribuire delle dimensioni.
• Ad un elemento inline, a meno che questo non venga dichiarato float, posizionato o modificandone la sua natura con la proprietà display, non si possono attribuire delle dimensioni (in realtà un elemento inline può avere solo una sorta di "dimensione verticale" grazie alla proprietà line-height. La disposizione verticale di elementi inline con la proprietà line-height impostata rispetto ad altri elementi inline adiacenti e/o contenitori si controlla grazie alla proprietà vertical-align)
• Elementi inline adiacenti vengono disposti orizzontalmente, mentre elementi block-level vengono disposti verticalmente.
• Un elemento block level di dimensioni non specificate occupa tra margini, bordi, padding e contenuto, tutta la larghezza messa a disposizione del suo box contenitore. In verticale occuperà l' altezza necessaria al suo contenuto.
• Un elemento inline occuperà sia in orizzontale che in verticale l' altezza necessaria al suo contenuto

Nel seguito dell' articolo verrà indicata una lista dettagliata di elementi inline ed elementi block-level.

Altri articoli

Altre guide

Altre newsletter