Spaziatura

Podcast su CSS - 013: Spaziatura

Supponi di avere una raccolta di tre scatole, impilate una sull'altra e di volere uno spazio tra di loro. In quanti modi puoi farlo in CSS?

La proprietà margin potrebbe fornirti ciò di cui hai bisogno, ma anche aggiungere spazio aggiuntivo indesiderato. Ad esempio, come puoi scegliere come target solo lo spazio tra ciascuno di questi elementi? In questo caso, gap potrebbe essere più appropriato. Esistono molti modi per regolare la spaziatura all'interno di una UI, ognuno con i propri punti di forza e condizioni.

Spaziatura HTML

Lo stesso HTML offre alcuni metodi per distribuire gli elementi. Gli elementi <br> e <hr> consentono di distanziare gli elementi nella direzione del blocco, che, se l'utente è in una lingua latina, è dall'alto verso il basso.

Se utilizzi un elemento <br>, verrà creata un'interruzione di riga, come se dovessi premere il tasto Invio in un elaboratore di testi.

<hr> crea una linea orizzontale con spazio su entrambi i lati, nota come margin.

Oltre all'utilizzo di elementi HTML, le entità HTML possono creare spazio. Un'entità HTML è una stringa riservata di caratteri che vengono sostituite con entità carattere dal browser. Ad esempio, se digiti © nel file HTML, questo viene convertito in un carattere ©. L'entità   viene convertita in uno spazio unificatore, che fornisce uno spazio incorporato. Fai attenzione però, perché l'aspetto senza peculiarità di questo personaggio unisce i due elementi, il che può causare comportamenti anomali.

Margine

Se vuoi aggiungere spazio all'esterno di un elemento, utilizza la proprietà margin. Il margine equivale ad aggiungere un cuscino attorno all'elemento. La proprietà margin è un'abbreviazione per margin-top, margin-right, margin-bottom e margin-left.

L'abbreviazione margin applica le proprietà in un determinato ordine: in alto, a destra, in basso e a sinistra. Puoi ricordare questi problemi con i problemi: TRouBLe.

L'abbreviazione margin può essere utilizzata anche con uno, due o tre valori. L'aggiunta di un quarto valore ti consente di impostare ogni singolo lato. Queste vengono applicate nel seguente modo:

• Un valore verrà applicato a tutti i lati. (margin: 20px).
• Due valori: il primo valore sarà applicato ai lati superiore e inferiore e il secondo al lato sinistro e al lato destro. (margin: 20px 40px)
• Tre valori: il primo valore è top, il secondo è left e right e il terzo è bottom. (margin: 20px 40px 30px).

Il margine può essere definito con una lunghezza, una percentuale o un valore automatico, come 1em o 20%. Se utilizzi una percentuale, il valore verrà calcolato in base alla larghezza del blocco contenitore dell'elemento.

Ciò significa che se il blocco contenitore dell'elemento ha una larghezza pari a 250px e l'elemento ha un valore margin pari a 20%: ogni lato dell'elemento avrà un margine calcolato di 50px.

Puoi anche utilizzare un valore di auto per il margine. Per gli elementi a livello di blocco con dimensioni limitate, un margine auto occuperà lo spazio disponibile nella direzione in cui è applicato. Un buon esempio è questo, dal modulo flexbox, in cui gli elementi si allontanano l'uno dall'altro.

Un altro buon esempio di margine auto è un wrapper centrato orizzontalmente che ha una larghezza massima. Questo tipo di wrapper viene spesso utilizzato per creare una colonna centrale coerente su un sito web.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

Qui, il margine viene rimosso dai lati superiore e inferiore (blocco) e auto condivide lo spazio tra il lato sinistro e quello destro (in linea).

Margine negativo

Possono essere utilizzati anche valori negativi per il margine. Invece di aggiungere spazio tra gli elementi di pari livello adiacenti, riduce lo spazio tra di loro. Gli elementi potrebbero sovrapporsi, se dichiari un valore negativo superiore allo spazio disponibile.

Compressione margine

La compressione del margine è un concetto complicato, ma lo incontrerai molto spesso durante la creazione delle interfacce. Supponi di avere due elementi, un'intestazione e un paragrafo, entrambi con margine verticale:

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

A prima vista, sei perdonato se pensi che la spaziatura del paragrafo sarà 5em dall'intestazione, perché la combinazione di 2rem e 3rem viene calcolata in 5rem. Tuttavia, poiché il margine verticale si comprime, lo spazio in realtà è 3rem.

La compressione del margine funziona selezionando il valore massimo di due elementi adiacenti con margine verticale impostato sui lati adiacenti. La parte inferiore di h1 soddisfa la parte superiore di p, pertanto viene selezionato il valore più alto tra il margine inferiore di h1 e il margine superiore di p. Se h1 dovesse avere 3.5rem di margine inferiore, lo spazio tra entrambi sarebbe 3.5rem perché è maggiore di 3rem. Solo i margini del blocco vengono compressi, non i margini in linea (orizzontali).

La compressione del margine è utile anche per gli elementi vuoti. Se hai un paragrafo con un margine superiore e uno inferiore pari a 20px, verranno creati solo 20px spazi, non 40px. Tuttavia, se all'interno dell'elemento viene aggiunto qualsiasi elemento, incluso padding, il relativo margine non verrà più compresso e sarà considerato come qualsiasi casella con contenuti.

Verifica la tua comprensione

Verifica le tue conoscenze sulla compressione dei margini

Impedire la compressione dei margini

Se imposti un elemento in modo assolutamente posizionato, utilizzando position: absolute, il margine non si comprimerà più. Inoltre, il margine non si comprimerà se utilizzi la proprietà float.

Se hai un elemento senza margine tra due elementi con margine del blocco, il margine non verrà compresso, perché i due elementi con margine del blocco non sono più elementi di pari livello adiacenti, sono solo elementi di pari livello.

Nella lezione sul layout hai imparato che i container flexbox e griglia sono molto simili ai container a blocco, ma gestiscono i relativi elementi secondari in modo molto diverso. Questo vale anche per la compressione dei margini.

Se prendiamo l'esempio originale della lezione e applichiamo flexbox con la direzione della colonna, i margini vengono combinati, anziché compressi. Questo può offrire prevedibilità al lavoro sul layout, ovvero lo scopo per cui sono progettati i container flexbox e griglia.

La compressione di margine e margine può essere difficile da capire, ma capire come funzionano, in dettaglio, è molto utile, per cui ti consigliamo vivamente di leggere questa spiegazione dettagliata.

Spaziatura interna

Invece di creare spazio all'esterno della scatola, come fa margin, la proprietà padding crea uno spazio all'interno della scatola, ad esempio un isolamento.

A seconda del modello di riquadro utilizzato, illustrato nella lezione sui modelli box, padding può anche influire sulle dimensioni complessive dell'elemento.

La proprietà padding è un'abbreviazione per padding-top, padding-right, padding-bottom e padding-left. Proprio come margin, anche padding ha proprietà logiche: padding-block-start, padding-inline-end, padding-block-end e padding-inline-start.

Posizionamento della

Come spiegato anche nel modulo Layout, se imposti per position un valore diverso da static, puoi distanziare gli elementi con le proprietà top, right, bottom e left. Esistono alcune differenze nel comportamento di questi valori direzionali:

• Un elemento con position: relative manterrà la propria posizione nel flusso del documento, anche quando imposti questi valori. Saranno relativi anche alla posizione dell'elemento.
• Un elemento con position: absolute baserà i valori direzionali dalla posizione dell'elemento padre relativo.
• Un elemento con position: fixed baserà i valori direzionali sull'area visibile.
• Un elemento con position: sticky applicherà i valori direzionali solo quando è nello stato agganciato/bloccato.

Nel modulo Proprietà logiche, scoprirai le proprietà inset-block e inset-inline, che consentono di impostare valori direzionali che rispettano la modalità di scrittura.

Entrambe le proprietà sono abbreviazioni che combinano i valori start e end e, di conseguenza, accettano un solo valore da impostare per start e end o due valori singoli.

Griglia e flexbox

Infine, sia nella griglia sia in flexbox, puoi utilizzare la proprietà gap per creare spazio tra gli elementi secondari. La proprietà gap è un'abbreviazione di row-gap e column-gap, accetta uno o due valori, che possono essere lunghezze o percentuali. Puoi anche utilizzare parole chiave come unset, initial e inherit. Se definisci un solo valore, lo stesso gap verrà applicato alle righe e alle colonne, ma se definisci entrambi i valori, il primo valore è row-gap e il secondo è column-gap.

Sia con flexbox sia con la griglia, puoi creare spazio anche utilizzando le loro funzionalità di distribuzione e allineamento, che illustreremo nei modulo griglia e nel modulo flexbox.

Creare una spaziatura coerente

È davvero una buona idea scegliere una strategia e seguirla per creare un'interfaccia utente coerente con un buon flusso e un buon ritmo. Un buon modo per ottenere questo risultato è utilizzare misure coerenti per la spaziatura.

Ad esempio, puoi impegnarti a utilizzare 20px come misura coerente per tutte le lacune tra gli elementi, noti come grondaie, in modo che tutti i layout abbiano un aspetto coerente. Potresti anche decidere di utilizzare 1em come spaziatura verticale tra i contenuti del flusso, in modo da ottenere una spaziatura coerente in base al valore font-size dell'elemento. Qualunque sia la tua scelta, devi salvare questi valori come variabili (o proprietà personalizzate CSS) per tokenizzare questi valori e semplificare un po' la coerenza.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

L'utilizzo di proprietà personalizzate come questa consente di definirle una sola volta e poi di utilizzarle in tutto il CSS. Quando vengono aggiornati, localmente all'interno di un elemento o a livello globale, i valori vengono trasmessi a cascata e vengono applicati i valori aggiornati.

Verifica la tua comprensione

Verifica le tue conoscenze sullo spazio