CONTATTACI

Guide per aspiranti programmatori

Ragazzo che inserisce un box giallo nella finestra del computer
Lezione 23 / 30

Box Model

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; 
 }

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.