CSS: il Box Model

Scritto da ambrix on . Postato in Corsi Programmazione

css layout

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.

CSS riquadri

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>
Box n°1
Box n°2
 
Si nota chiaramente che in quest’ultimo caso la proprietà dispay-inline compie il suo dovere: il box n°1 e il box n°2 sono ora affiancati e ciascuno occupa per intero lo spazio del testo interno.
 
Possiamo affiancare due riquadri vuoti? C’è un’opzione di visualizzazione che ci permette di bloccare le dimensioni dei box. Nel prossimo esempio utilizzeremo l’ inline-block .
 
/* 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

Tags:

Per Richieste, Avvisi e Lasciti Ereditari

Disclaimer

I contenuti di questo Blog (testi, immagini, foto, etc.) sono di mia creazione, tranne nei casi dove espressamente indicato.