Da zero a Iper: impariamo insieme il web

condividendo si impara

L'importanza dei margini non è marginale

2022-06-19 17:59:14

Ciao a tutte e tutti voi!
Nel contenuto di oggi continuiamo il nostro viaggio alla scoperta di come funzionano i siti web sotto il cofano e di come possiamo imparare assieme a crearne da zero approfondendo il tema dei margini interni ed esterni degli elementi del nostro sito.
Si tratta di proprietà essenziali che incontreremo inevitabilmente una quantità enorme di volte nel nostro percorso per cui vale la pena cercare di comprendere il concetto il più possibile mettendo le mani in pasta.
Lo faremo, come di consueto, con qualche esercizio offerto dalla piattaforma gratuita FreeCodeCamp.
Come vedremo, la possibilità di impostare margini interni ed esterni in tutti e quattro i lati dei nostri elementi ci permette di distanziare meglio i contenuti del nostro sito e di renderlo graficamente più moderno, accattivante e leggibile.
Una possibilità preziosissima nel nostro percorso!
Se conoscete persone potenzialmente interessate ad esplorare questi temi con noi siete caldamente invitati e invitate ad invitarli o invitarle in una girandola di inviti da fare invidia alla diplomazia internazionale!
Un altro modo di sostenere questo progetto è quello di utilizzare le opzioni messe a disposizione da cam.tv sotto ai contenuti o nella pagina del canale.
Inoltre chi vuole può diventare un sostenitore periodico aderendo all' I-Team: l'area riservata in cui potrete vedere più dietro le quinte e contenuti che non vengono condivisi in questa sezione pubblica.
Detto questo auguro una buona visione e una buona lettura a tutte e tutti voi!
Condividendo si impara!

Il box model (modello a scatola)

Sembra che in questo canale abbiamo parlato di contenitori e di scatole fino forse al punto di romperle le scatole.

Però anche oggi questo concetto ci viene di nuovo in aiuto per comprendere una parte fondamentale della struttura degli elementi che inseriamo nelle nostre pagine web.

Vedremo alcune proprietà fondamentali che ci permettono di regolare la distanza dei nostri elementi fra loro e anche lo spazio occupato dal contenuto all'interno dell'elemento stesso.

Cominciamo immaginando proprio che ogni elemento, sia esso un paragrafo o un video, possa essere rappresentato come una scatola in questo modo:

Padding (margini interni)

Vediamo come innanzitutto il contenuto è circondato da una spazio interno chiamato padding che potremmo definire anche margini interni che definiscono la distanza del contenuto dai bordi dell'elemento.

Se volessimo allargare lo spazio interno all'elemento lasciando al centro il contenuto basterà selezionare l'elemento in questione e utilizzare la proprietà padding attribuendole un valore maggiore.

A esempio questo codice ci permette di creare un bottone dal colore di sfondo rosso con il contenuto scritto in bianco e separato da 12px di spazio interno nei quattro lati:

<style>

button {

background-color: red;

color: white;

padding: 12px;

}

</style>

Il padding indica quindi la distanza del contenuto dai bordi dell'elemento - scatola per i quattro lati.

Selezionare padding differenti per lati differenti: la notazione per singolo lato e la notazione in senso orario

Quanto visto sopra vale quando vogliamo che il contenuto sia posto al centro della scatola e che quindi vi sia la stessa distanza dai bordi dell'elemento da ogni lato.

Ci possono però essere casi in cui vogliamo che il testo del nostro paragrafo sia spostato più su un lato che su un altro, forse per un logo.

In questo caso possiamo utilizzare delle proprietà specifiche per ogni singolo lato:

padding-top: definisce la grandezza dello spazio al di sopra del contenuto fino al bordo della scatola - elemento
padding-right: definisce la grandezza dello spazio a destra del contenuto fino al bordo
padding-bottom: definisce la grandezza dello spazio sotto al contenuto fino al bordo
padding-left: Definisce la grandezza dello spazio a sinistra del contenuto fino al bordo

Potremmo quindi fare in modo, ad esempio, che un paragrafo abbia un colore di sfondo rosso, un contenuto scritto in bianco e parecchio spazio libero sulla destra che sarà quindi occupato solo dal colore di sfondo selezionato.

<style>

p {

background-color: red;

color: white;

padding-right: 20 px;

padding-left: 2px;

}

</style>

In questo caso abbiamo inserito due volte la proprietà padding. Una per definire il margine interno verso destra e una per quello verso sinistra.

Tuttavia c'è un modo più veloce ed efficace di definire diversi valori per ogni lato ed è quello di utilizzare la notazione in senso orario.

In questo modo possiamo selezionare una volta sola la proprietà padding e assegnarle nell'ordine quattro valori in senso orario partendo dal lato superiore in questo modo:

<style>

p {

padding: 2px 20px 2px 1px;

}

</style>

Così facendo, andando in senso orario abbiamo dato un margine interno di 2px al di sopra del contenuto, 20 px a destra, 2px al di sotto e 1 px a sinistra evitando di dover scrivere quattro proprietà singole ognuna per un lato.

I bordi (border)

Il bordo è la proprietà che segna il confine fra l'interno e l'esterno dell'elemento in questione.

Spesso il bordo è nascosto ma può anche essere mostrato come una linea continua o tratteggiata (o altro), ne possiamo cambiare lo spessore, i colori e la forma arrotondandone gli angoli o rendendolo anche circolare come abbiamo già visto in un contenuto precedente parlando dei bordi delle immagini.

I margini esterni (margin)

La proprietà margin indica invece i margini esterni dell'elemento e cioè quanto il bordo della nostra scatola metaforica è distante da quello delle scatole che lo precedono o lo circondano.

Anche il margine esterno può essere impostato per essere uguale in tutte le direzioni oppure per essere diverso da lato a lato secondo le stesse indicazioni date sopra per la proprietà padding.

Con questo strumento abbiamo quindi la possibilità di controllare a quale distanza sta il nostro elemento dagli altri elementi della pagina posti ai suoi quattro lati.

Una possibilità che si rivelerà preziosa nel seguito del nostro viaggio che continuerà settimana prossima.

Grazie di aver letto fino a qui e buon tutto!

Come contribuire allo sviluppo del nostro gruppo di studio

Se ritenete utile e interessante questo progetto potete contribuire al suo sviluppo e alla sua continuazione condividendo questo canale con chi pensate che possa essere interessato a fare questo percorso insieme a noi e imparare a creare siti web a partire da zero.

V'invito anche a valutare la possibilità di diventare finanziatori di questa spedizione nel mondo del web con un contributo a vostra scelta utilizzando gli strumenti offerti da Cam.TV, per esempio attraverso l'opzione sostieni sotto ai contenuti oppure nella pagina del canale.

Se volete potete poi entrare nell' I-Team: L'area riservata ai sostenitori periodici del canale in cui condivido dietro le quinte, contenuti e riflessioni che non sono disponibili altrove.

Approfitto dell'occasione per ringraziare di cuore tutte le persone che hanno già contribuito!

Vi ringrazio per il tempo che avete passato con me e vi auguro un iper-buona vita online e offline!

E non dimentichiamoci che condividendo si impara!!