Come utilizzare un valore di spazio negativo in Tailwind?

Nei CSS Tailwind, il ' spazio in mezzo Le utilità vengono utilizzate per controllare lo spazio tra gli elementi figlio dei contenitori flessibili o a griglia. Offre varie classi, come “space-x-” e “space-y-” per applicare rispettivamente lo spazio orizzontale e verticale tra gli elementi figlio. Inoltre, gli utenti possono anche utilizzare il file negativo valore con queste utilità per creare spaziatura tra gli elementi nella direzione opposta. Possono anche essere utilizzati per posizionare un elemento all'interno di un altro elemento.

Questa guida esemplificherà il metodo di utilizzo di un valore di spazio negativo in Tailwind.

Come utilizzare un valore di spazio negativo in Tailwind?

Per utilizzare un valore di spazio negativo in Tailwind, crea innanzitutto una struttura HTML. Quindi, usa il trattino “ – ' con le classi di utilità 'spazio tra' desiderate per convertirlo in un valore negativo. IL ' -spazio-x- ' E ' -spazio-y- Le utilità vengono spesso utilizzate per posizionare un elemento all'interno di un altro elemento.

Esaminiamo gli esempi seguenti per capirlo meglio.

Esempio 1: applicare una spaziatura orizzontale negativa tra gli elementi

In questo esempio, abbiamo un contenitore flessibile con alcuni elementi figlio in fila. Utilizzeremo il ' -spazio-x-8 ' per applicare la spaziatura orizzontale negativa tra gli elementi flessibili: