Comprendere il box model nei CSS - WeSchool


Un peculiarità dell’elemento div è la possibilità di impostare una altezza ed una larghezza grazie alle seguenti regole:
 
 
Questo è possibile perché il nostro elemento 
div
 è un particolare tipo di elemento che permette la personalizzazione delle sue misure. Purtroppo questo non è possibile per tutti gli elementi, infatti per alcuni è possibile specificare soltanto alcune regole CSS, ma saremo in grado di comprendere meglio queste differenze una volta introdotto il concetto di 
Box Model
.





















Videolezione "Introduzione al concetto e all'utilizzo di una griglia CSS"

























    const isRelatedVideo = 1;

 
Cos'è il Box Model 
Per comprendere nel miglior dei modi questo concetto dobbiamo capire fin da subito che esistono degli elementi ai quali possiamo applicare delle dimensioni ed altri che invece non possono, chiamandoli rispettivamente elementi 
blocco
 (
block
) e elementi 
in linea
 (
inline
).
 
Per i primi sarà possibile impostare delle dimensioni (come altezza e larghezza ad esempio) ed altre regole che modificheranno il loro posizionamento mentre per i secondi non sarà possibile: ovviamente un elemento che naturalmente è dichiarato 
inline
 potrà essere modificato e trasformato in 
block
 tramite il nostro CSS.
 
Non starò ad elencarvi uno ad uno gli elementi appartenenti alle varie tipologie, perché risulterebbe inutile e fuorviante (una piccola ricerca su internet vi fornirà migliaia di esempi) ma andremo a vedere le regole che possiamo applicare agli elementi 
block
 sfruttando un elemento di questa categoria che vi troverete ad utilizzare spesso; l’elemento 
div
.
 
 
Oltre a personalizzare le dimensioni dell’elemento utilizzanto le regole 
height
 e 
width 
possiamo anche impostare altri valori che modificheranno ulteriormente la posizione dell’elemento stesso.
 
Come possiamo vedere dall’immagine sopra, un elemento 
block
 viene personalizzato anche dal suo padding, dal bordo e dal margine. Andiamo a conoscere da vicino queste proprietà:
 
 
padding
 rappresenta la distanza tra il contenuto dell’elemento ed il suo bordo;
 
 
border
 permette di specificare il bordo di un elemento;
 
 
margin
 ovvero la distanza dell’elemento dai suoi elementi adiacenti.
 
Andiamo inizialmente ad analizzare le regole padding e margin che, nonostante il diverso significato, condividono la stessa sintassi.
 
 
Come potete vedere, la proprietà 
margin
 accetta 4 valori che, come spiegato nell’immagine, vanno ad applicarsi ai differenti lati del nostro elemento. Questo è valido anche per la regola padding come mostrato qua in basso:
 
 
Per fortuna nostra queste proprietà accettano anche un numero variabile di valori che ci permettono di raggrupparli rendendo la sintassi ancor più semplice.
 
 
Come potete vedere gli sviluppatori CSS ci hanno aiutato molto nella creazione delle nostre regole fornendoci svariati modi per impostare i valori di queste proprietà. Nel secondo esempio abbiamo utilizzato la parola auto che ci permette di centrare orizzontalmente il nostro elemento.
 
L’ultima cosa che ci resta da vedere è la regola border che ci consentirà di definire un bordo ai nostri elementi grazie alla seguente sintassi
 
{ 
border: dimensione (in px o em) tipologia (solid, dashed,..) colore (red o anche #ff0); }
 
Ad esempio:
 
div { border: 3px solid red }
 
Questa regola ci permetterà di:
 
 impostare lo 
spessore
 del bordo, nel’esempio è 3px;
 
 impostare il tipo di 
bordo
, nell’esempio solid;
 
 impostare il 
colore
, inserito con la parola red.
 
Avete appena appreso le regole fondamentali per utilizzare il Box Model all’interno delle vostre pagine HTML e potete iniziare a sperimentare tranquillamente con i loro valori. Ma ditemi una cosa, riuscite ad affiancare i vari elementi blocco?
 
 

