Il box model

Comprendere come funzionano i box è la chiave per creare i layout con i CSS...

Box di tipo block e inline

Abbiamo già visto che in CSS abbiamo due tipi di elementi: block e inline.

Un elemento block:

inizia sempre su una nuova linea
si estende orizzontalmente fino a riempire il suo container
ha delle proprietà width e height
padding, margin e border fanno sì che gli altri elementi siano spinti via

A meno che non si cambi la loro proprietà display, elementi come <h1> e <p> vengono mostrati come blocchi.

Un elemento inline:

non inizia in una nuova linea
non ha proprietà width e height
padding, margin e border causano l'allontanamento degli altri elementi inline orizzontalmente, ma non verticalmente

Esempi: <a>, <span>, <em>, <strong>...

Il box model

Un box di tipo block è composto da:

contenuto: dimensionato usando le proprietà width e height
padding: spazio bianco attorno al contenuto
border: racchiude il contenuto e il padding
margin: è il livello più esterno, spazio bianco tra il border e altri elementi della pagina

Ad esempio con queste regole:

otteniamo:

Il nostro box (senza contare il margin) occuperà quindi:
una larghezza di 350 + 25 +25 + 5 + 5 = 430px
e un'altezza di 150 + 25 + 25 + 5 + 5 = 230px

Il box model alternativo

Può sembrare poco intuitivo che la larghezza dell'oggetto sia width + padding + border, quindi è stato introdotto un box model alternativo in cui la width e la height specificate sono di fatto quelle del border:

Per usare questo box alternativo in un elemento si fa così:

Volendolo applicare a tutti gli elementi della pagina:

Margins, padding e borders

E' possibile specificare margini, ecc. dando dei valori diversi ai vari lati:

Collapsing dei margini

Se ci sono due elementi i cui margini (positivi) si toccano, essi si combineranno in un unico margine, con la dimensione del più grande dei due

Bordi

E' possibile specificare tre proprietà per i bordi:

border-width: lo spessore
border-style: il tipo di tratto
border-color: il colore

E' anche possibile cambiare le proprietà dei singoli lati, come negli esempi seguenti:

Il box model su elementi inline

Vediamo insieme cosa capita se applichiamo alcune proprietà del box model a un elemento inline:

Se si vuole che un elemento appaia come un blocco ma allo stesso tempo sia inserito inline, si può usare il valore speciale display: inline-block

Questo è utile ad esempio quando si vuole che un link abbia una grande "target area", sulla quale l'utente possa cliccare/toccare comodamente, come nelle barre di navigazione:

Esercizio: Felini

Crea una pagina:

felini.html

Collega la pagina a un foglio di stile:

styles.css

Crea una cartella images nella quale inserire le foto, assegnando nomi opportuni.

Crea 7 elementi div all'interno dei quali inserirai:

La foto di un felino, di dimensioni 500 x 500
Il nome della specie in maiuscolo e grassetto
Alcune righe di descrizione

Fai in modo che ogni div abbia:

una larghezza di 500 pixel
uno sfondo di un colore diverso, abbastanza chiaro
un bordo del colore dello sfondo, ma più scuro, di spessore 3 pixel
il titolo dello stesso colore del bordo
la descrizione di colore grigio molto scuro
un padding di 10 pixel
un margin di 15 pixel