Proprietà CSS margin-top
La proprietà CSS margin-top imposta il margine superiore di un elemento. Scopri i valori e gli esempi.
La proprietà margin-top imposta la dimensione del margine superiore di un elemento — lo spazio trasparente sopra il suo box, tra il bordo superiore dell'elemento e l'elemento che lo precede. È il corrispettivo verticale di margin-bottom e uno dei quattro lati controllati insieme dalla sintassi abbreviata margin.
Questa pagina illustra i valori accettati da margin-top, i due comportamenti che sorprendono di più — collasso verticale dei margini e percentuali calcolate rispetto alla larghezza — e mostra esempi interattivi per ciascun valore.
Questa proprietà non ha effetto sugli elementi inline non sostituiti come <span>. Per aggiungere spazio verticale attorno ad essi, è necessario renderli inline-block o block prima.
Collasso verticale dei margini
Quando il margine inferiore di un blocco tocca il margine superiore del blocco successivo, i due collassano in un unico margine pari al maggiore dei due — non alla loro somma. Quindi un paragrafo con margin-bottom: 30px seguito da uno con margin-top: 20px produce 30px di spazio tra di loro, non 50px.
Il collasso avviene solo tra margini verticali (superiore e inferiore). I margini sinistro e destro non collassano mai. È inoltre impedito da qualsiasi elemento interposto tra i due margini — un bordo, un padding, un elemento inline, o un contesto di formattazione a blocchi come un contenitore flex/grid oppure overflow diverso da visible.
Sono ammessi valori negativi. Un margin-top negativo sposta l'elemento verso l'alto, sovrapponendolo o riducendo il gap con l'elemento superiore.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditabile | No. |
| Animabile | Sì. Il margine superiore dell'elemento è animabile. |
| Versione | CSS2 |
| Sintassi DOM | object.style.marginTop = "50px"; |
Sintassi
Sintassi della proprietà CSS margin-top
margin-top: length | auto | initial | inherit;Esempio della proprietà margin-top:
Esempio della proprietà CSS margin-top con valore px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: 100px;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> 100px margin is specified top for this text.</p>
</body>
</html>Risultato
Esempio della proprietà margin-top specificata in "em":
Esempio della proprietà CSS margin-top con valore em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin-top: 5em;
}
</style>
</head>
<body>
<h2>Margin-top 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>Esempio della proprietà margin-top specificata in "%"
Un margin-top in percentuale viene calcolato rispetto alla larghezza del blocco contenitore — non alla sua altezza. È facile dimenticarlo: margin-top: 10% all'interno di un elemento padre largo 600px equivale a 60px, e cambia quando il padre diventa più largo, anche se il margine è verticale.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: 10%;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> 10% margin is specified top for this text.</p>
</body>
</html>Esempio della proprietà margin-top con il valore "initial":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: initial;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> Margin top is specified for this text.</p>
</body>
</html>Esempio della proprietà margin-top con il valore "inherit":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-top: 50px;
}
.margin-top {
margin-top: inherit;
background-color: lime;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<div>
Here is some text.
<p class="margin-top"> Margin top is specified for this text.</p>
</div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| length | Un margine superiore fisso in px, em, pt, cm, ecc. Può essere negativo. Il valore predefinito è 0. | Prova » |
| % | Un margine superiore espresso come percentuale della larghezza del blocco contenitore. | Prova » |
| auto | Il browser calcola il valore. Per un margine superiore questo si risolve in 0 (a differenza di auto orizzontale, che può centrare un elemento). | Prova » |
| initial | Ripristina la proprietà al suo valore predefinito (0). | Prova » |
| inherit | Eredita il valore calcolato dall'elemento padre. |
auto è utile solo per centrare con margin-left/margin-right. Su un margine superiore non produce alcun effetto di centratura e si comporta come 0.
Quando usare margin-top invece di padding-top
Usa margin-top per creare spazio all'esterno di un elemento, allontanandolo dai suoi vicini — e ricorda che quei margini possono collassare con l'elemento superiore. Usa padding-top quando hai bisogno di spazio all'interno del box, tra il bordo e il contenuto; il padding non collassa mai ed è incluso in qualsiasi background visibile.
Proprietà correlate
margin— la sintassi abbreviata che imposta tutti e quattro i margini contemporaneamente.margin-bottom,margin-right,margin-left— gli altri tre lati.box-sizing— controlla come larghezza/altezza si relazionano a padding e bordo nel modello box.