CSS: il Box Model
Lezione 04 In questa lezione di CSS, parleremo del box model o anche visual formatting model, per effetto del quale gli elementi HTML e le stringhe di testo sono visualizzate all’interno di appositi riquadri rettangolari.
Possiamo pensare ad un box model , come a un riquadro, le cui dimensioni, posizioni, margini e così via dipendono dalle proprietà utilizzate al’occorrenza. Il box model in CSS, costituisce un esempio di modello a riquadri, e ci dice che esiste una delimitazione attorno a ogni elemento HTML: esso descrive la quantità di spazio occupata dall’elemento. Per capire meglio, consideriamo il seguente esempio:
/* file styles.css */
p {
background-color: blue;
width: 150px;
padding: 15px;
border: 15px solid #3C3C3C;
margin: 25px;
color: white;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>READY</p> </body> </html>
READY
Il box-model introduce nuove proprietà come il padding e i margini, che si aggiungono ai bordi e al contenuto. Il testo READY è circondato da padding, bordi e margini.
Figura 1 – Box Model Layout
Analizzeremo le nuove proprietà tra poco. Prima di ciò, facciamo alcune considerazioni, provando i cosìddetti block-level elements, che ci permettono di fissare le dimensioni degli elementi.
/* file styles.css */
.box {
background-color: gray;
width: 50px;
height: 25px;
display: inline;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="box"></div> <div class="box"></div> </body> </html>
Visualizzando il codice di questo esempio, otteniamo un bel … nulla! E’ come se i riquadri che abbiamo creato con la classe box, non fossero mai esistiti. Questo perchè inserendo l’opzione di visualizzazione display: inline , stiamo implicitamente occupando uno spazio nullo, in quanto all’interno del div non c’è alcun contenuto. Gli inline-elements non hanno altezza o larghezza prestabilita, occupano esattamente lo spazio richiesto dal loro contenuto. Per visualizzare una parte degli elementi creati possiamo inserire un bordo al riquadro.
/* file styles.css */
.box {
background-color: gray;
width: 50px;
height: 25px;
border: 1px solid darkblue;
display: inline;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="box"></div> <div class="box"></div> </body> </html>
Si vede chiaramente che non essendovi ancora contenuto all’interno del div, l’elemento collassa in un box vuoto. Ora, proviamo a reinserire del testo all’interno del tag div.
/* file styles.css */
.box {
background-color: gray;
width: 150px;
height: 125px;
border: 1px solid darkblue;
display: inline;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="box">Box n°1</div> <div class="box">Box n°2</div> </body> </html>
/* file styles.css */
.box {
background-color: gray;
width: 150px;
height: 125px;
border: 1px solid darkblue;
display: inline-block;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="box"></div> <div class="box"></div> </body> </html>
Abbiamo ottenuto l’affiancamento dei due box, solo che in questo caso non è stato necessario inserire alcun contenuto: l’inline-block fissa le dimensioni dei riquadri indipendentemente da ciò che c’è dentro!
A questo punto, vediamo come nascondere un elemento: possiamo scegliere tra due diversi approcci.
/* file styles.css */
.box {
background-color: gray;
width: 150px;
height: 125px;
border: 1px solid black;
}
#box1 {
visibility: hidden;
}
#box2 {
display: none;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="box" id="box1"></div> <div class="box" id="box2"></div> </body> </html>
Con gli ID #box1 e #box2, stiamo facendo in modo che la classe .box non venga vista. Infatti sia con display-none che con visibility-hidden , si ottiene lo stesso risultato: i riquadri non sono visibili. Ma qual è la differenze tra le due proprietà? Con visibility: hidden l’elemento viene effettivamente nascosto, pertanto occupa comunque spazio all’interno della pagina web. Con display: none, invece, si fa in modo da rendere inesistente l’elemento.
Continuiamo la nostra ispezione sul box-model CSS, andando ad analizzare i margini che possono essere attribuiti ad un elemento. Come si evince dalla figura 1, i margini sono la parte più esterna di un riquadro. Vediamo come utilizzarli.
/* file styles.css */
p {
border: 2px solid #44b3c2;
margin-top: 10px;
margin-right: 25px;
margin-bottom: 10px;
margin-left: 25px;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Margin VS Border</p> </body> </html>
Margin VS Border
Grandioso! Possiamo impostare lo spazio bianco all’esterno dei bordi di un elemento, e lo possiamo fare per ogni lato dell’elemento. Così come già visto per i bordi, esiste una scrittura più rapida anche per i margini:
/* file styles.css */
p {
border: 2px solid #44b3c2;
margin: 10px 25px 10px 25px;
}
La cosa importante da tenere in conto è la sequenza oraria dei valori: si parte sempre dall’alto (top), poi destra (right), giù (bottom) e quindi sinistra (left).
Se non impostiamo i valori bottom e left, verranno settati di default i valori top e right. Pertanto, scrivere margin: 10px 25px è la stessa cosa che scrivere margin: 10px 25px 10px 25px.Andiamo ad analizzare ora l’elemento padding col seguente esempio.
/* file styles.css */
p {
padding: 25px;
border: 2px solid #44b3c2;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Padding VS Content </p> </body> </html>
Padding VS Content
Perfetto! Possiamo regolare a nostro piacimento lo spazio bianco all’interno dei margini e dei bordi di un elemento, lo possiamo fare impostando la direzione singolarmente o utilizzanto le shorthand property.
Per concludere questa lezione, ragioniamo un po’ sulle dimensioni del box-model. Impostando la larghezza e l’altezza di un elemento, stiamo effettivamente fissando la dimensione del suo contenuto. Tuttavia, le dimensione totale dell’elemento include il padding, i bordi e i margini.
/* file styles.css */
p {
background-color: blue;
width: 150px;
height: 100px;
padding: 25px;
border: 25px solid #3C3C3C;
margin: 25px 0px;
color: white;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>READY</p> </body> </html>
READY.
In questo caso abbiamo una larghezza totale di 300 pixel (150 + 25*2 + 25*2 + 25*2) ed un’altezza totale di 200 pixel (100 + 25*2 + 25*2). Il calcolo delle dimensioni effettive può risultare poco intuitivo, dovendo includere anche spazi non direttamente visibili. Una valida alternativa risiede nella proprietà box-sizing .
/* file styles.css */
.box {
width: 300px;
height: 100px;
padding: 25px;
border: 2px solid black;
margin: 25px;
}
#box2 {
box-sizing: border-box;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="box"></div> <div class="box" id="box2"></div> </body> </html>
Si nota la differenza? Usando border-box come valore del box-sizing, stiamo escludendo i margini dalla dimensione totale dell’elemento. Pertanto il riquadro con ID #box2 sarà più piccolo rispetto al primo.
Ritorna alla precedente <– []–> Vai alla successiva
