Spaziatura

Podcast CSS - 013: Spaziatura .

Supponiamo che tu abbia una raccolta di tre scatole impilati l'uno sull'altro e vuoi che trascorrano uno spazio. In quanti modi potresti pensare di farlo in CSS?

La proprietà margin potrebbe darti ciò che ti serve, ma potrebbe anche aggiungere ulteriore spaziatura da evitare. Ad esempio, come puoi scegliere come target solo lo spazio tra ciascuno di questi elementi? Un elemento come gap potrebbe essere più appropriato in questo caso. Esistono molti modi per regolare la spaziatura all'interno di una UI, ognuno con i suoi punti deboli e punti di forza.

Spaziatura HTML

L'HTML stesso fornisce alcuni metodi per distribuire gli elementi. Gli elementi <br> e <hr> ti consentono di distribuire gli elementi nella direzione del blocco, che se sei in una lingua latina, è dall'alto verso il basso.

Se usi un elemento <br>, verrà creata un'interruzione di riga, proprio come se dovessi premere il tasto Invio in un software di videoscrittura.

<hr> crea una linea orizzontale con uno spazio ai 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 viene sostituita dal browser con entità carattere. Ad esempio: se digitassi © nel file HTML, verrebbe convertito in un carattere ©. L'entità   viene convertita in uno spazio unificatore, che fornisce uno spazio in linea. Fai attenzione però, perché l'aspetto senza interruzioni di questo personaggio unisce i due elementi, il che può causare comportamenti strani.

Margine

Se vuoi aggiungere spazio all'esterno di un elemento, utilizzi la proprietà margin. Il margine è come l'aggiunta di un cuscino intorno all'elemento. La proprietà margin è una forma abbreviata di margin-top, margin-right, margin-bottom e margin-left.

La forma abbreviata margin applica le proprietà in un determinato ordine: in alto, a destra, in basso e a sinistra. Ecco alcuni problemi: TROPPO.

La forma abbreviata 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:

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

Il margine può essere definito con una lunghezza percentuale o valore automatico, ad esempio 1em o 20%. Se usi una percentuale, Il valore verrà calcolato in base alla larghezza del blocco che contiene l'elemento.

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

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

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

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

In questo caso il margine viene rimosso dai lati superiore e inferiore (blocco), e auto condivide lo spazio tra i lati sinistro e destro (in linea).

Margine negativo

Per il margine si possono utilizzare anche valori negativi. Invece di aggiungere spazio tra gli elementi di pari livello adiacenti, tra un'interfaccia e l'altra riducono lo spazio. Questo può comportare la sovrapposizione di elementi, se dichiari un valore negativo superiore allo spazio disponibile.

Compressione margine

La compressione del margine è un concetto complesso, ma è qualcosa che incontrerai molto spesso durante la creazione delle interfacce. Supponiamo che tu abbia due elementi: un'intestazione e un paragrafo con entrambi 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;
}

In sintesi, sarebbe perdonato se il paragrafo sarà distanziato di 5em rispetto all'intestazione, perché 2rem e 3rem combinati vengono calcolati in 5rem. Poiché il margine verticale si comprime, lo spazio in realtà è 3rem.

La compressione del margine funziona selezionando il valore più alto tra due elementi adiacenti con margine verticale impostato sui lati adiacenti. La parte inferiore di h1 incontra la parte superiore di p, in modo che venga selezionato il valore più grande del margine inferiore di h1 e di quello superiore di p. Se h1 dovesse avere 3.5rem di margine inferiore, lo spazio tra entrambi sarà 3.5rem perché è maggiore di 3rem. Vengono compressi solo i margini del blocco, non quelli in linea (orizzontali).

La compressione del margine aiuta anche con gli elementi vuoti. Se un paragrafo ha un margine superiore e uno inferiore pari a 20px, verranno creati solo 20px di spazio: non 40px. Tuttavia, se viene aggiunto qualsiasi elemento all'interno dell'elemento, incluso padding, il suo margine non verrà più compresso e verrà considerato come qualsiasi casella con contenuti.

Verifica le tue conoscenze

Verifica le tue conoscenze sulla compressione dei margini

Impedire la compressione dei margini

Se rendi un elemento assolutamente posizionato, utilizzando position: absolute, il margine non verrà più compresso. Inoltre, il margine non verrà compresso se utilizzi anche la proprietà float.

Se hai un elemento senza margine tra due elementi con margine del blocco, nemmeno il margine si comprime, perché i due elementi con margine del blocco non sono più fratelli adiacenti, bensì di pari livello.

Nella lezione sul layout, hai imparato che i container flexbox e griglia sono molto simili ai container a blocchi, ma gestiscono gli elementi secondari in modo molto diverso. Questo è il caso anche della compressione dei margini.

Se prendiamo l'esempio originale della lezione e applichiamo flexbox con direzione della colonna, i margini vengono combinati anziché essere compressi. Ciò può offrire prevedibilità nel lavoro di layout, che è lo scopo dei container flexbox e griglia.

Il margine e la compressione del margine possono essere difficili da comprendere, ma comprenderne il funzionamento nel dettaglio è molto utile, quindi questa spiegazione dettagliata è vivamente consigliato.

Spaziatura interna

Anziché creare uno spazio all'esterno della scatola, come ha fatto margin, la proprietà padding crea invece uno spazio all'interno della casella: come l'isolamento.

A seconda del modello di box utilizzato, che è stato coperto nel lezione su box model - padding può anche influire sulle dimensioni complessive dell'elemento.

La proprietà padding è una forma abbreviata di 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

Inoltre, viene trattato nel modulo layout. se imposti per position un valore diverso da static, puoi spaziare 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 se li imposti. Inoltre, saranno relativi alla posizione dell'elemento.
• Un elemento con position: absolute baserà i valori direzionali sulla posizione dell'elemento padre relativo.
• Un elemento con position: fixed baserà i valori direzionali sull'area visibile.
• Un elemento con position: sticky applica i valori direzionali solo quando è nello stato agganciato/bloccato.

Nel modulo Proprietà logiche, scoprirai le proprietà inset-block e inset-inline, che ti 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, accettare un valore da impostare per start e end oppure due valori individuali.

Griglia e flexbox

Infine, sia nella griglia che in flexbox puoi utilizzare la proprietà gap per creare spazio tra gli elementi secondari. La proprietà gap è una forma abbreviata 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 a righe e colonne, ma se definisci entrambi i valori, il primo valore è row-gap e il secondo è column-gap.

Sia con flexbox che con griglia, puoi creare spazio anche usando le loro capacità di distribuzione e allineamento, che tratteremo nel modulo griglia e modulo flexbox.

Creare una spaziatura coerente

È una buona idea scegliere una strategia e continuare a farlo per aiutarti a creare un'interfaccia utente coerente con flusso e ritmo buoni. Un buon modo per raggiungere questo obiettivo è utilizzare misure coerenti per la spaziatura.

Ad esempio, puoi impegnarti a utilizzare 20px come misura coerente per tutti gli spazi vuoti tra gli elementi, noti come grondaie, quindi tutti i layout hanno aspetto e design coerenti. Puoi 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) tokenizzare quei valori e semplificare un po' la coerenza.

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

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

Se utilizzi proprietà personalizzate come questa, puoi definirle una volta sola, e poi utilizzarle in tutto il CSS. Quando vengono aggiornati, localmente all'interno di un elemento o globalmente, i valori verranno trasmessi a cascata e si rifletteranno quelli aggiornati.

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di spaziatura