Spacing: Margin

GCGiuseppe Crescitelli

Concetto di margin in CSS e TailwindCSS

Il margin definisce lo spazio esterno di un elemento, separandolo dagli elementi circostanti. In TailwindCSS il margin è gestito tramite utility class atomiche che mappano direttamente le proprietà CSS margin-top, margin-right, margin-bottom e margin-left.

Scala di spaziatura predefinita

TailwindCSS utilizza una scala coerente basata su rem. Ogni valore rappresenta un moltiplicatore di 0.25rem.

Esempi di valori comuni:

  • 0 → 0rem
  • 0.5 → 0.125rem
  • 1 → 0.25rem
  • 2 → 0.5rem
  • 4 → 1rem
  • 8 → 2rem
  • 16 → 4rem

Questa scala garantisce coerenza visiva e semplicità di manutenzione.

Utility base per il margin

Le classi di margin seguono una sintassi uniforme.

  • m-valore applica il margin su tutti i lati
  • mt-valore margin-top
  • mr-valore margin-right
  • mb-valore margin-bottom
  • ml-valore margin-left
<div class="m-4">Margin su tutti i lati</div>
<div class="mt-8">Margin solo sopra</div>

Margin sugli assi

Per applicare il margin simultaneamente su due lati opposti si usano le utility sugli assi.

  • mx-valore applica margin-left e margin-right
  • my-valore applica margin-top e margin-bottom
<div class="mx-6">Spazio orizzontale</div>
<div class="my-2">Spazio verticale</div>

Margin automatico

Il valore auto è utilizzato principalmente per l’allineamento, in particolare per la centratura orizzontale.

  • m-auto
  • mx-auto
  • my-auto
<div class="mx-auto w-1/2">Elemento centrato</div>

Margin negativi

TailwindCSS consente l’uso di margin negativi per sovrapposizioni o layout avanzati.

Sintassi:

  • -m-valore
  • -mt-valore
  • -mx-valore
<div class="-mt-4">Elemento spostato verso l’alto</div>

I margin negativi sono particolarmente utili in card sovrapposte o layout editoriali.

Margin logici per supporto RTL

Per layout internazionalizzati è possibile usare le proprietà logiche.

  • ms-valore margin-inline-start
  • me-valore margin-inline-end

Queste classi rispettano automaticamente la direzione del testo (LTR o RTL).

<div class="ms-4">Margin iniziale logico</div>

Valori arbitrari

Quando la scala predefinita non è sufficiente, Tailwind consente valori personalizzati.

Sintassi:

  • m-["valore"]
  • mt-["valore"]
  • mx-["valore"]
<div class="mt-[3.75rem]">Margin personalizzato</div>

I valori arbitrari mantengono la flessibilità senza modificare la configurazione.

Responsive design

Le utility di margin possono essere applicate in modo responsivo tramite breakpoint.

  • sm:
  • md:
  • lg:
  • xl:
  • 2xl:
<div class="m-2 md:m-6 lg:m-12">Margin responsivo</div>

Ogni breakpoint sovrascrive i precedenti in modo progressivo.

Stati e pseudo-classi

Il margin può variare in base allo stato dell’elemento.

  • hover:
  • focus:
  • active:
  • group-hover:
<div class="m-4 hover:m-8">Margin su hover</div>

Questo approccio consente micro-interazioni senza CSS personalizzato.

Forzare la priorità

Per sovrascrivere altre utility è possibile usare il modificatore di importanza.

  • !m-valore
  • !mt-valore
<div class="m-0!">Margin forzato a zero</div>

Disabilitare il margin

Per rimuovere completamente lo spazio esterno si utilizza il valore zero.

  • m-0
  • mx-0
  • my-0

Questo è utile per reset locali o override di stili esistenti.

Integrazione con la configurazione Tailwind

La scala dei margin deriva dalla chiave spacing nel file tailwind.config.js. Personalizzando questa sezione è possibile estendere o modificare tutti i valori disponibili per il margin mantenendo coerenza con padding, width e height.

Il sistema di margin in TailwindCSS è progettato per essere coerente, prevedibile e completamente componibile.