Guida CSS interattiva: Margin

Cos'è il margin

Il margin è lo spazio fuori dal bordo di un elemento. È sempre trasparente e il suo compito è allontanare gli altri elementi. Nell'esempio, il contenitore grigio si vede attraverso il margin intorno al riquadro blu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

La fascia grigia non fa parte del riquadro: lo sfondo del riquadro si ferma al suo bordo. Per uno spazio che prende lo sfondo dell'elemento, usa il padding.

La forma abbreviata di margin

margin accetta da uno a quattro valori, nello stesso ordine in senso orario del padding:

Dichiarazione	Sopra	Destra	Sotto	Sinistra
`margin: 10px;`	10	10	10	10
`margin: 10px 20px;`	10	20	10	20
`margin: 10px 20px 30px;`	10	20	30	20
`margin: 10px 20px 30px 40px;`	10	20	30	40

Ogni lato ha anche la sua proprietà (margin-top, margin-right, margin-bottom, margin-left) e le versioni logiche che seguono la direzione del testo (margin-inline-start, margin-inline-end, margin-block, margin-inline).

A differenza del padding, il margin accetta auto e valori negativi:

Valore	Esempio	Note
Lunghezza	`16px`, `1.5rem`	Il più comune
Percentuale	`5%`	Della larghezza del blocco contenitore, per tutti e quattro i lati
`auto`	`margin: 0 auto`	Il browser riempie lo spazio rimasto
Negativo	`margin-top: -10px`	Avvicina l'elemento o il suo vicino, può sovrapporsi

Centrare con margin: 0 auto

margin: 0 auto è il modo classico per centrare un blocco in orizzontale. auto su entrambi i lati dice al browser di dividere in parti uguali lo spazio rimasto. Serve una larghezza minore del contenitore, altrimenti non resta niente da dividere:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

Nel flusso normale i margini auto non centrano in verticale (i margini auto verticali diventano 0) e non fanno niente sugli elementi inline. Per una panoramica completa su come centrare, vedi come centrare un div.

Il collasso dei margini

Quando due margini verticali si toccano, non si sommano. Il browser tiene solo il più grande. Qui il primo riquadro ha margin-bottom: 30px e il secondo margin-top: 20px, e lo spazio tra loro è 30px, non 50px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

Il collasso è voluto: permette a paragrafi e titoli di portarsi dietro la propria spaziatura senza raddoppiarla dove si incontrano. Coglie di sorpresa in un secondo caso, quando il margine superiore di un figlio esce dal genitore:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

Nel primo genitore, il margine di 30px del figlio è collassato attraverso il bordo superiore del genitore, quindi spinge in basso l'intero genitore invece di creare spazio grigio al suo interno. Una qualsiasi di queste soluzioni lo impedisce:

display: flow-root sul genitore (a differenza di overflow: hidden, non taglia niente).
Padding o un bordo sul lato superiore del genitore.
Un genitore flex o grid: i margini degli elementi flex e grid non collassano mai.

I margini orizzontali non collassano mai, e nemmeno quelli degli elementi flottanti o posizionati in modo assoluto.

Margini negativi

Un margine negativo tira nella direzione opposta. Sul lato superiore o iniziale sposta l'elemento stesso; sul lato inferiore o finale avvicina l'elemento successivo. I riquadri possono sovrapporsi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

margin auto in flexbox

Dentro un contenitore flex, un margine auto prende tutto lo spazio libero dal suo lato. È il modo più semplice per spingere un elemento all'estremità opposta di una riga, e in flexbox auto funziona anche in verticale:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

margin-inline-start: auto mette lo spazio libero prima di "Log in", alla fine della riga, sia nelle pagine da sinistra a destra sia in quelle da destra a sinistra.

Errori comuni

margin: 0 auto su un elemento senza larghezza. Un blocco riempie già il suo contenitore; imposta un width o un max-width.
margin: auto su un elemento inline. I margini auto su span, a o un img lasciato inline valgono 0. Rendilo display: block.
Sommare due margini verticali e aspettarsi il totale. Collassano al più grande; usa gap in flex o grid, oppure usa sempre una sola direzione di margine.
Il margine di un figlio che spinge il genitore. È il collasso tra genitore e figlio; aggiungi display: flow-root al genitore.
Usare il margin per uno spazio che dovrebbe avere uno sfondo. Il margin è trasparente; usa il padding.

Domande frequenti

Cos'è il margin in CSS?

Il margin è lo spazio fuori dal bordo di un elemento. È trasparente e allontana gli elementi vicini. Si imposta con margin o con le proprietà dei singoli lati margin-top, margin-right, margin-bottom e margin-left.

Cosa fa margin: 0 auto?

Imposta a 0 i margini superiore e inferiore e divide in parti uguali lo spazio orizzontale rimasto tra il margine sinistro e quello destro, e così centra in orizzontale un elemento di blocco. L'elemento deve avere una larghezza minore del suo contenitore, per esempio max-width: 600px.

Perché margin auto non centra il mio elemento?

Di solito perché l'elemento non ha una larghezza (un blocco riempie il contenitore, quindi non c'è niente da dividere), oppure perché è inline (span, a, img per impostazione predefinita), dove i margini auto valgono 0. Dagli una larghezza e display: block, oppure centralo dal genitore con flexbox o grid.

Cos'è il collasso dei margini?

Quando due margini verticali si toccano, per esempio il margine inferiore di un paragrafo e quello superiore del successivo, il browser usa solo il più grande invece di sommarli. Succede solo ai margini verticali dei blocchi nel flusso normale, non nei layout flex o grid.

Il margin può essere negativo?

Sì. Un margine negativo tira l'elemento verso quel lato, oppure tira l'elemento successivo sopra di lui, quindi i riquadri possono sovrapporsi. È utile per piccole correzioni di allineamento e per far uscire un elemento dal padding del suo contenitore.

Concetti correlati