Proprietà CSS margin — Sintassi, Valori ed Esempi

La proprietà CSS margin crea spazio all'esterno del bordo di un elemento — il gap tra quell'elemento e i suoi vicini. A differenza del padding, che aggiunge spazio all'interno del bordo, il margin spinge gli altri contenuti lontano dall'elemento.

Questa pagina tratta la sintassi abbreviata, il funzionamento del pattern con uno fino a quattro valori, il centraggio con auto, i margini negativi e la regola di collasso dei margini che sorprende la maggior parte dei principianti.

A cosa si riferisce margin come abbreviazione

La proprietà margin è un'abbreviazione che imposta tutte e quattro le proprietà dei lati individuali in un'unica dichiarazione:

Il pattern con uno fino a quattro valori

Poiché margin è un'abbreviazione, il numero di valori forniti determina a quali lati si applicano. I valori seguono sempre il senso orario partendo dall'alto (alto → destra → basso → sinistra):

Quattro valori — margin: 25px 10px 15px 20px; imposta in alto 25px, a destra 10px, in basso 15px, a sinistra 20px.
Tre valori — margin: 15px 10px 20px; imposta in alto 15px, a destra e a sinistra 10px, in basso 20px.
Due valori — margin: 15px 10px; imposta in alto e in basso 15px, a destra e a sinistra 10px.
Un valore — margin: 15px; applica 15px a tutti e quattro i lati.

Un utile aiuto mnemonico per la forma a quattro valori è la parola TRouBLe (Top, Right, Bottom, Left).

Informazione

I valori negativi sono validi.

Informazione

I margini in alto e in basso non hanno effetto sugli elementi inline, come <span> o <code>.

Valore iniziale	0
Si applica a	Tutti gli elementi.
Ereditato	No.
Animabile	Sì. Il margin è animabile.
Versione	CSS1
Sintassi DOM	Object.style.margin = "20px 10px";

Sintassi

Sintassi della proprietà CSS margin

margin: length | auto | initial | inherit;

Esempio della proprietà margin:

Esempio della proprietà CSS margin con quattro valori

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà margin con il margine di un elemento impostato al 10% per tutti i lati:

Esempio della proprietà CSS margin con valore % (percentuale)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà margin definita come "em":

Esempio della proprietà CSS margin con valore em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Provalo tu stesso »

Osserviamo il seguente esempio che mostra la differenza tra le proprietà margin, padding e border:

Esempio della proprietà margin con le proprietà padding e border:

Esempio della proprietà CSS margin con un valore (px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #eee;
        width: 200px;
        border: 20px solid #8ebf42;
        padding: 30px;
        margin: 55px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Provalo tu stesso »

Centrare un blocco con `margin: auto`

Impostare i margini sinistro e destro su auto è il metodo classico per centrare orizzontalmente un elemento a livello di blocco che ha una larghezza esplicita. Il browser divide equamente lo spazio orizzontale disponibile tra i due lati:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        margin: 0 auto;
        background-color: #1c87c9;
        color: #fff;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">I am centered horizontally.</div>
  </body>
</html>

margin: 0 auto; significa margini in alto e in basso pari a 0 e auto a sinistra e a destra. Si noti che auto centra solo orizzontalmente — non centra verticalmente. Per il centraggio verticale, è necessario ricorrere a Flexbox o Grid.

Margini negativi

I margini accettano valori negativi, che avvicinano un elemento verso il suo vicino (o verso l'esterno oltre il suo contenitore) invece di allontanarlo. Questo è utile per sovrapporre elementi o spostare un elemento oltre il padding del suo genitore:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .second {
        margin-top: -20px;
        background-color: #8ebf42;
        color: #fff;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>First paragraph.</p>
    <p class="second">This paragraph is pulled up to overlap the one above.</p>
  </body>
</html>

Collasso dei margini

Quando i margini superiore e inferiore di due elementi a livello di blocco si incontrano verticalmente, non si sommano — al contrario collassano in un unico margine pari al maggiore dei due. Quindi un paragrafo con margin-bottom: 30px; seguito da uno con margin-top: 20px; produce uno spazio di 30px tra di loro, non 50px.

Informazione

Il collasso dei margini riguarda solo i margini verticali (superiore/inferiore) degli elementi a livello di blocco nel flusso normale. I margini sinistro e destro non collassano mai, e i margini degli elementi Flex o Grid non collassano.

Valori

Valore	Descrizione	Provalo
auto	Imposta il margine. È il valore predefinito di questa proprietà.	Provalo »
length	Definisce un margine in px, pt, cm, ecc. Il valore predefinito è 0.	Provalo »
%	Imposta il margine in % dell'elemento contenitore.	Provalo »
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dall'elemento genitore.

Esercitazione

Pratica

Quali delle seguenti affermazioni sui Margini CSS sono vere?

I margini vengono utilizzati per creare spazio attorno agli elementi, al di fuori di qualsiasi bordo definito.I margini non hanno proprietà.Con CSS, hai il pieno controllo sui margini.Ci sono proprietà per impostare il margine per ogni lato di un elemento (superiore, destro, inferiore e sinistro).I margini sono sempre trasparenti.Puoi usare valori negativi per creare effetti di sovrapposizione.La proprietà margin-clear consente di impostare il margine di un elemento.

A cosa si riferisce margin come abbreviazione

Il pattern con uno fino a quattro valori

Sintassi

Esempio della proprietà margin:

Risultato

Esempio della proprietà margin con il margine di un elemento impostato al 10% per tutti i lati:

Esempio della proprietà margin definita come "em":

Esempio della proprietà margin con le proprietà padding e border:

Centrare un blocco con margin: auto

Margini negativi

Collasso dei margini

Valori

Esercitazione

Centrare un blocco con `margin: auto`