La spaziatura blocchi Gutenberg CSS permette di correggere margini, distanze e separazioni tra elementi senza intervenire sui file del tema. Con selettori mirati puoi modificare soltanto un gruppo, una sezione o la combinazione tra titolo e paragrafo che presenta problemi. Il metodo più sicuro consiste nell’assegnare una classe CSS al blocco Gutenberg e applicare le regole esclusivamente a quella classe. In questo modo le modifiche restano circoscritte e non alterano automaticamente tutte le pagine del sito WordPress. Il tutorial utilizza proprietà CSS moderne come margin-block, padding-block e i selettori tra elementi adiacenti, compatibili con i browser aggiornati.

Prima di modificare la spaziatura dei blocchi Gutenberg

WordPress genera classi CSS specifiche per ogni blocco, come .wp-block-heading, .wp-block-paragraph, .wp-block-image e .wp-block-group. Queste classi consentono di intervenire sui singoli elementi, ma da sole possono essere troppo generiche per una modifica localizzata.

Il metodo consigliato è usare una classe aggiuntiva assegnata manualmente al blocco interessato. La classe può essere applicata a un gruppo, a una colonna, a una sezione o a un contenitore che racchiude più blocchi.

Prima di scrivere il CSS, verifica questi aspetti:

Il tema utilizza l’Editor del sito o il Personalizza tema.
Il blocco interessato dispone del campo Classe CSS aggiuntiva.
Il tema non applica regole con una specificità maggiore.
La modifica viene verificata sia su computer sia su smartphone.
È disponibile un backup o un ambiente di test per evitare interventi diretti sul sito pubblicato.

I temi a blocchi permettono generalmente di inserire il CSS da Aspetto > Editor > Stili > CSS aggiuntivo, se l’opzione è disponibile. Nei temi classici il percorso più comune è Aspetto > Personalizza > CSS aggiuntivo. La posizione può cambiare in base al tema e alla versione di WordPress.

Come assegnare un selettore CSS a un blocco Gutenberg

Passo 1: selezionare il contenitore corretto

Apri l’editor del post o della pagina e seleziona il blocco che contiene gli elementi da correggere. Un blocco Gruppo è spesso la scelta migliore perché permette di controllare contemporaneamente titoli, paragrafi, immagini e pulsanti presenti nella stessa sezione.

Nel pannello delle impostazioni del blocco, apri la sezione Avanzate e individua il campo Classe CSS aggiuntiva. Inserisci una classe descrittiva senza punto iniziale, ad esempio:

sezione-introduzione

Nel foglio di stile la stessa classe deve essere preceduta dal punto:

.sezione-introduzione {
margin-block: 2rem;
}

Il punto identifica una classe CSS. Scrivere .sezione-introduzione nel campo dell’editor sarebbe invece errato, perché WordPress aggiungerebbe una classe con una sintassi non valida per questo utilizzo.

Passo 2: controllare il risultato con l’anteprima

Salva la pagina come bozza e apri l’anteprima. Controlla la distanza sopra e sotto il contenitore, ma anche la spaziatura tra i blocchi interni.

Se il CSS non produce effetti, usa gli strumenti per sviluppatori del browser. In Google Chrome puoi fare clic con il tasto destro sull’elemento, scegliere Ispeziona e verificare:

La classe personalizzata è presente nell’elemento HTML.
La regola CSS viene caricata.
Una regola del tema non sovrascrive margin, padding o gap.
Il selettore punta al contenitore corretto e non a un elemento annidato diverso.

Come correggere margini e distanze interne con CSS

La proprietà margin-block controlla i margini verticali in modo più affidabile rispetto a margin-top e margin-bottom, soprattutto con layout e lingue che utilizzano direzioni di scrittura differenti. Per una sezione Gutenberg puoi usare:

.sezione-introduzione {
margin-block-start: 3rem;
margin-block-end: 3rem;
}

Per modificare lo spazio interno del contenitore usa invece padding-block:

.sezione-introduzione {
padding-block: 2rem;
padding-inline: 1.5rem;
}

Il margine separa il blocco dagli elementi esterni, mentre il padding crea spazio tra il bordo del contenitore e il suo contenuto. Confondere queste due proprietà è una delle cause più comuni di spaziature apparentemente irregolari.

Per evitare che il primo e l’ultimo elemento interno aggiungano margini inattesi, puoi azzerare i margini alle estremità:

.sezione-introduzione > :first-child {
margin-block-start: 0;
}

.sezione-introduzione > :last-child {
margin-block-end: 0;
}

Il selettore > limita la regola ai figli diretti del contenitore. Questo impedisce di modificare accidentalmente paragrafi o titoli annidati in altri gruppi.

Come regolare lo spazio tra blocchi consecutivi

Quando il problema riguarda la distanza tra ogni blocco interno, il selettore tra elementi adiacenti è più preciso di una regola applicata a tutti i paragrafi:

.sezione-introduzione > * + * {
margin-block-start: 1.25rem;
}

La sintassi > * + * seleziona ogni elemento che viene dopo un altro elemento all’interno di .sezione-introduzione. In questo modo il primo blocco non riceve un margine superiore aggiuntivo, mentre ogni blocco successivo mantiene una distanza uniforme.

Nei temi WordPress moderni, il blocco Gruppo può usare il layout is-layout-flow e la proprietà gap. Per intervenire sullo spazio tra i figli puoi definire:

.sezione-introduzione.is-layout-flow {
gap: 1.25rem;
}

Non applicare contemporaneamente gap e margini verticali agli stessi figli senza verificare il risultato, perché le due distanze possono sommarsi. Se il tema gestisce già il blocco tramite gap, è preferibile modificare quella proprietà invece di aggiungere margini individuali.

Per ridurre soltanto la distanza tra un titolo e il paragrafo immediatamente successivo puoi usare:

.sezione-introduzione .wp-block-heading + .wp-block-paragraph {
margin-block-start: 0.75rem;
}

Questa regola non modifica tutti i paragrafi della sezione: agisce solo su un paragrafo che segue direttamente un blocco Titolo. Se tra titolo e paragrafo è presente un altro blocco, il selettore non viene applicato.

Come rendere la spaziatura responsive

Una spaziatura adatta allo schermo desktop può risultare eccessiva su smartphone. La funzione CSS clamp() consente di definire un valore minimo, uno proporzionale alla larghezza dello schermo e uno massimo:

.sezione-introduzione {
padding-block: clamp(1.25rem, 4vw, 3rem);
padding-inline: clamp(1rem, 3vw, 2rem);
}

In questo esempio il padding verticale non scende sotto 1.25rem e non supera 3rem. Il valore intermedio 4vw permette alla spaziatura di adattarsi gradualmente alla larghezza della finestra.

Per modificare il comportamento soltanto su schermi piccoli puoi usare una media query:

@media (max-width: 768px) {
.sezione-introduzione > * + * {
margin-block-start: 0.9rem;
}
}

Il punto di interruzione 768px è una scelta comune, ma non è una regola universale. Il valore corretto dipende dal layout del tema, dalla lunghezza dei testi e dalla disposizione dei blocchi.

Evita di usare !important come prima soluzione. Questa direttiva può risolvere un conflitto di priorità, ma rende più difficile mantenere e modificare il CSS in seguito. Se una regola non funziona, aumenta prima la precisione del selettore:

.entry-content .sezione-introduzione > * + * {
margin-block-start: 1.25rem;
}

Il contenitore .entry-content non è presente in tutti i temi, quindi deve essere verificato tramite gli strumenti per sviluppatori del browser. Non esiste un selettore universale valido per ogni tema WordPress.

Errori da evitare nella spaziatura blocchi Gutenberg CSS

Un selettore globale come quello seguente modifica tutti i paragrafi del sito e può creare effetti indesiderati nelle pagine, negli articoli e nei widget:

p {
margin-block-end: 2rem;
}

È più sicuro restringere la regola alla pagina o alla sezione interessata:

.sezione-introduzione .wp-block-paragraph {
margin-block-end: 1rem;
}

Anche l’uso di .wp-block-group senza un contenitore personalizzato può influenzare numerosi gruppi presenti nella stessa pagina. La classe .wp-block-group identifica infatti molti blocchi Gruppo, non una singola sezione.

Dopo ogni modifica, controlla che non compaiano sovrapposizioni tra sezioni, bordi troppo vicini al testo o spazi vuoti su mobile. Svuota la cache del plugin, del tema o della rete di distribuzione dei contenuti se il nuovo CSS non appare subito nel front-end.

Una classe specifica e un selettore CSS limitato al contenitore rendono la spaziatura blocchi Gutenberg CSS più prevedibile e semplice da mantenere.

FAQ

Nei temi a blocchi puoi usare Aspetto > Editor > Stili > CSS aggiuntivo, se disponibile. Nei temi classici il percorso più comune è Aspetto > Personalizza > CSS aggiuntivo.

Il tema potrebbe usare un selettore più specifico oppure la proprietà gap invece dei margini. Controlla l’elemento con gli strumenti per sviluppatori del browser e verifica quale regola prevale.

margin crea spazio esterno tra il blocco e gli elementi circostanti. padding crea spazio interno tra il bordo del blocco e il suo contenuto.

Sì. Inserisci la regola dentro una media query come @media (max-width: 768px) e applica il selettore alla classe CSS aggiuntiva del blocco.

No, non come prima scelta. È preferibile usare un selettore più specifico e ricorrere a !important soltanto quando una regola del tema non può essere sovrascritta altrimenti.

Altri articoli di questa serie: