Proprietà CSS margin

Definizione e uso

La proprietà abbreviata margin imposta tutte le proprietà di margine in una dichiarazione. Questa proprietà può avere da 1 a 4 valori.

Spiegazione

Questa proprietà abbreviata imposta la larghezza di tutti i margini di un elemento, o la larghezza dei margini di ciascun lato.

I margini verticali adiacenti degli elementi bloccanti si sommano, mentre gli elementi inline non occupano margini superiori e inferiori. I margini laterali degli elementi inline non si sommano. Allo stesso modo, i margini degli elementi flottanti non si sommano. È possibile specificare valori negativi per i margini, ma è necessario essere cauti nell'uso.

Nota:È possibile utilizzare valori negativi.

Esempio 1

margin:10px 5px 15px 20px;
  • Il margine superiore è di 10px
  • Il margine destro è di 5px
  • Il margine inferiore è di 15px
  • Il margine sinistro è di 20px

Esempio 2

margin:10px 5px 15px;
  • Il margine superiore è di 10px
  • Il margine destro e il margine sinistro sono di 5px
  • Il margine inferiore è di 15px

Esempio 3

margin:10px 5px;
  • Il margine superiore e il margine inferiore sono di 10px
  • Il margine destro e il margine sinistro sono di 5px

Esempio 4

margin:10px;
  • Tutti i 4 margini sono di 10px

Vedi anche:

Tutorial CSS:Margine esterno CSS

Manuale HTML DOM:Proprietà margin

Esempio

Impostare i 4 margini dell'elemento p:

p
  {
  margin:2cm 4cm 3cm 4cm;
  }

Prova da solo

Sintassi CSS

margin: length|auto|initial|inherit;

Valore dell'attributo

Valore Descrizione
auto Il browser calcola i margini.
length Specificare i valori dei margini con unità specifiche, come pixel, centimetri, ecc. Il valore predefinito è 0px.
% Specificare i margini come percentuale della larghezza dell'elemento contenitore.
inherit Si prescrive che i margini debbano essere ereditati dal elemento genitore.

Dettagli tecnici

Valore predefinito: 0
Ereditarietà: no
Versione: CSS1
Sintassi JavaScript: object

Più esempi

Tutte le proprietà di margine in una dichiarazione
Questo esempio dimostra come impostare tutte le proprietà di margine in una dichiarazione.

Supporto del browser

I numeri nella tabella indicano la versione del browser iniziale che supporta completamente l'attributo.

Chrome IE / Edge Firefox Safari Opera
1.0 6.0 1.0 1.0 3.5