Proprietà di margine di stile

Definizione e uso

margin Imposta o restituisce la margine esterna dell'elemento.

Questa proprietà può accettare da uno a quattro valori:

  • Un valore, ad esempio: div {margin: 50px} - Tutte e quattro le margini esterne sono di 50px
  • Due valori, ad esempio: div {margin: 50px 10px} - La margine esterna superiore e inferiore è di 50px, la margine esterna laterale è di 10px
  • Tre valori, ad esempio: div {margin: 50px 10px 20px} - La margine esterna superiore è di 50px, la margine esterna laterale è di 10px, la margine esterna inferiore è di 20px
  • Quattro valori, ad esempio: div {margin: 50px 10px 20px 30px} - il margine superiore è di 50px, il margine destro è di 10px, il margine inferiore è di 20px e il margine sinistro è di 30px

Entrambi i margini e i padding inseriscono spazio intorno all'elemento. Ma la differenza sta nel fatto che i margini inseriscono spazio intorno al bordo, mentre i padding inseriscono spazio all'interno del bordo dell'elemento.

Vedi anche:

Corso CSS:Margine esterno CSS

Manuale CSS:Attributo margin

Esempio

Esempio 1

Imposta tutti e quattro i margini dell'elemento <div>:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

Prova tu stesso

Esempio 2

Cambia tutti e quattro i margini dell'elemento <div> in "25px":

document.getElementById("myDiv").style.margin = "25px";

Prova tu stesso

Esempio 3

Restituisce il margine dell'elemento <div>:

alert(document.getElementById("myDiv").style.margin);

Prova tu stesso

Esempio 4

Differenza tra l'attributo margin e padding:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Prova tu stesso

Sintassi

Restituisce l'attributo margin:

object.style.margin

Imposta l'attributo margin:

object.style.margin = "%|length|auto|initial|inherit"

Valore dell'attributo

Valore Descrizione
% Definisce il margine come percentuale della larghezza dell'elemento padre.
length Definisce il margine con unità di lunghezza.
auto Browser che impostano il margine (tutti e quattro i margini saranno uguali).
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: 0
Valore di ritorno: Stringo che rappresenta il margine esterno dell'elemento.
Versione CSS: CSS1

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto