Guide per aspiranti programmatori

Ogni elemento html, al di là della sua customizzazione mediante il linguaggio CSS, viene racchiuso in un “box” con all’ interno del contenuto (di qualsiasi natura, da un testo ad un’ immagine) e, via via, procedendo verso l’ esterno, una serie di componenti: il padding css, il border css ed il margin css. 

Con il CSS possiamo andare ad agire modificando le proprietà di questi componenti.

PADDING CSS, MARGIN CSS, BORDER CSS: cosa sono?

Il padding css è lo spazio tra il contenuto ed il border.

Il border css è letteralmente il bordo del nostro box. Possiamo ampiamente customizzarlo, in quanto dispone di svariate proprietà CSS che analizzeremo poco più in là nel nostro articolo. 

Il margin css, infine, è lo spazio esterno al border.
Il suo ruolo è quello di separare l’ elemento da altri elementi (separa, ad esempio, un <div> da un altro). 

Proviamo a spiegartelo meglio con una metafora:
immagina di aver acquistato un paio di cuffie da Amazon. Sarai di sicuro entusiasta di ricevere dal corriere il tuo pacco! Ma, hai mai pensato che il pacco in questione potesse essere un ottimo box model?
Svisceriamo meglio l’analogia: nel caso del tuo acquisto

il border sarebbe il cartone della scatola;
il padding sarebbe la sua imbottitura, che tutela il contenuto;
il contenuto sarebbero le cuffie che hai acquistato;
il margin sarebbe lo spazio tra la tua scatola, appoggiata sullo scaffale, e gli altri oggetti su quello stesso scaffale.

Decisamente più chiaro così, vero?

È importante sottolineare che due margin non andranno a sommarsi, ma si sovrapporranno: 

se avessimo, per esempio, due <div> ognuno di loro avrebbe il suo box-model; se li separassimo mediante l’utilizzo di un margin da 20 px ciascuno, non avremmo uno spazio totale di separazione grande 40px, bensì uno da 20px.

Inoltre, se, per esempio, andassimo a dare un background all’elemento html in questione, questo background si applicherebbe allo spazio del padding e del border, ma lascerebbe libero quello del margin, che – ribadiamo – serve esclusivamente a separare gli elementi della pagina html. 

Tutti e 3 i componenti del box model accettano un valore in pixel (o in un’altra delle unità di misura che abbiamo visto) da settare su 4 proprietà: top, right, bottom e left. 

Nell’ esempio sottostante, in cui definiremo il margin di un elemento, potrai osservarne la sintassi, che può essere espressa in due modalità:

modalità 1

.elemento1 { 
 margin: 10px 30px 25px 20px; 
 }

modalità 2

.elemento1 { 
 margin-top: 10px; 
 margin-right: 30px; 
 margin-bottom: 25px; 
 margin-left: 20px; 
 }

Attenzione! Ci sono due proprietà CSS, quali width ed height, che servono, rispettivamente, a definire l’ampiezza e l’altezza del nostro documento html.

Potresti facilmente incorrere nell’errore di pensare che settando il valore di queste due proprietà tu stia andando effettivamente a modificare la dimensione globale del box-model: ebbene, non è così!

Quando assegniamo una width e una height ad un elemento, quello che verrà ridimensionato è il CONTENUTO: il valore del resto dei componenti del box-model verrà aggiunto a quella dimensione.

Questo comportamento di default, tuttavia, può essere cambiato grazie all’aiuto della proprietà box-sizing. 

Questa proprietà accetta due tipi di valore:

• content-box: il valore, appunto, di default del browser (che, come abbiamo visto, nel caso in cui un elemento disponga di una propria width, fa in modo che il valore del resto dei componenti venga aggiunto alla width);esempio:

  .elemento1 { 
   box-sizing: content-box; 
   width: 150px; 
   padding: 50px; 
   border: solid 10px red; 
   }

  In questo caso l’ elemento in totale occuperà 150px + 100px (padding left e padding right) + 20px (border left e border right), per un totale di 270px.

  Ricorda! Puoi anche non specificare la proprietà box-sizing se il suo valore è content-box, perché è un valore di default.

• border-box: il valore custom che farà in modo che, delineando una width dell’elemento, questa comprenda la dimensione del resto delle componenti.esempio

  .elemento1 { 
   box-sizing: border-box; 
   width: 150px; 
   padding: 50px; 
   border: solid 10px red; 
   }

  In questo secondo caso, il totale sarà comunque di 150px. I componenti del box model (fatta eccezione per il margin!!) andranno ad occupare parte dello spazio riservato al contenuto, schiacciandolo.

  Qui evidenziamo un’ altra grande differenza tra il margin e il padding: con questa impostazione, infatti, all’aumentare dello spazio dedicato al padding, diminuirà lo spazio dedicato al contenuto. Il padding andrà, quindi, a “schiacciare” il contenuto. Il border seguirà l’esempio del padding.

  Aumentando invece, le dimensioni del margin, questo non andrà a schiacciare il contenuto, ma ugualmente ad aggiungere dello spazio divisorio tra gli elementi, preservando le dimensioni del contenuto stesso.

  Attenzione! Se ti avvali di un framework per la stesura del tuo codice il valore di default della proprietà box-sizing, diventerà, probabilmente, border-box.

Le proprietà del border 

Come accennato, il border in particolare ha diverse proprietà; vediamole:

• border-style: definisce lo stile del bordo. Può essere dashed (tratteggiato), dotted (a puntini), oppure solid (normale); puoi applicarla a tutti i lati oppure ad uno solo, adeguando la sintassi della proprietà secondo necessità. (ad esempio: border-top-style)
• border-width: delinea la grandezza del bordo; può accettare un solo valore per tutti i lati oppure diversi valori per lato; puoi anche modificare un solo lato attraverso lievi modifiche al nome della proprietà, come border-width-top, o bottom e così via
• border-color: nomen omen, si riferisce alla modifica del colore del bordo. Anche qui si può modificare il colore di ogni singolo lato con le stesse modalità di cui sopra
• border-radius: serve ad arrotondare gli angoli del nostro bordo. Può accettare valori in pixel o in percentuale. A seconda di questi valori il nostro box può diventare anche un cerchio, un’ellisse, o avere un effetto pillola. Per padroneggiare meglio i risultati di questo settaggio, puoi trovare online dei border-radius generator. Anche per questa proprietà del border avrai la possibilità di modificarne tutti i lati o solo alcuni.

Puoi definire tutte queste caratteristiche del border – ad esclusione del border-radius – anche mediante la proprietà generica “border”, come nell’esempio sottostante:

.elemento1 { 
 border: solid 10px red; 
 }