Proprietà margin

La proprietà margin imposta il margine esterno dell'elemento. I valori della proprietà possono essere qualsiasi unità di misura o la parola chiave auto, che consente al browser di calcolare autonomamente il margine dell'elemento. Per impostazione predefinita, ogni browser può aggiungere margini diversi agli elementi.

La proprietà è una scorciatoia per le proprietà margin-top, margin-right, margin-bottom, margin-left.

Sintassi

cssselettore {
  margin: valore;
}

Numero di valori

La proprietà margin accetta 1, 2, 3 o 4 valori, elencati separati da spazi:

Esempio

Ora avremo un blocco senza margini:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 0;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Esempio

Ora impostiamo un margine di 10px per il blocco:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Esempio

Impostiamo un margine di 10px in alto e in basso e 20px - a sinistra e a destra:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px 20px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Esempio

Impostiamo un margine di 5px in alto, 15px a destra, 25px in basso e 35px a sinistra:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 5px 15px 25px 35px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Vedi anche