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.
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?