Proprietà CSS margin-bottom
La proprietà CSS margin-bottom imposta il margine inferiore di un elemento. Scopri la sintassi e gli esempi pratici.
La proprietà CSS margin-bottom imposta lo spazio sotto un elemento, tra il suo bordo inferiore e l'elemento successivo nel flusso. Il margine è trasparente: allontana il contenuto vicino ma non porta mai uno sfondo o un bordo proprio. Questa pagina tratta la sintassi, le unità accettate, la regola importante del collasso dei margini e il rapporto tra margin-bottom e le altre proprietà dei margini.
Usa margin-bottom ogni volta che vuoi uno spazio verticale dopo un elemento — ad esempio, per distanziare paragrafi in pila, separare un'intestazione dal testo sottostante o lasciare uno spazio sotto una card.
I valori negativi sono validi (es. margin-bottom: -10px;) e spostano l'elemento successivo verso l'alto, consentendo la sovrapposizione.
margin-bottom non ha effetto sugli elementi inline non sostituiti come <span> o <a>. Per applicare margini verticali a questi elementi, impostare prima display: inline-block o display: block.
margin-bottom è uno dei quattro lati controllati dalla proprietà shorthand margin; il suo corrispondente verticale è margin-top.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. Il margine inferiore dell'elemento è animabile. |
| Versione | CSS2 |
| Sintassi DOM | object.style.marginBottom = "70px"; |
Sintassi
Sintassi della proprietà CSS margin-bottom
margin-bottom: length | percentage | auto | initial | inherit;Il valore può essere espresso in diversi modi:
- length — una dimensione fissa in
px,em,rem,pt,cm, ecc.emè relativo alla dimensione del font dell'elemento stesso,remalla dimensione del font della radice. - percentage — una frazione della larghezza del blocco contenitore (non dell'altezza), quindi un margine inferiore in
%scala in base alla larghezza del genitore. - auto — il browser calcola il valore; per
margin-bottomsi risolve quasi sempre a0. - initial / inherit — ripristina il valore predefinito (
0) o copia il valore dal genitore.
Esempio della proprietà margin-bottom:
Esempio della proprietà CSS margin-bottom con valore px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.bottom {
margin-bottom: 100px;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="bottom">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>Risultato
Esempio della proprietà margin-bottom definita come "4em":
Esempio della proprietà CSS margin-bottom con valore em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.bottom {
margin-bottom: 4em;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="bottom">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-bottom specificata in "px", "em" e "%":
Esempio della proprietà CSS margin-bottom con valori px, em e %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.p1 {
margin-bottom: 5em;
}
p.p2 {
margin-bottom: 20%;
}
p.p3 {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>A paragraph with no margins specified.</p>
<p class="p1">Bottom margin is set to 5em.</p>
<p class="p2">Bottom margin is set to 20%.</p>
<p class="p3">Bottom margin is set to 20px.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>Collasso dei margini
Una sorpresa comune: quando il margin-bottom di un blocco incontra il margin-top del successivo, i due non si sommano. Invece, collassano in un unico margine pari al maggiore dei due. Il collasso si applica solo ai margini verticali (superiore e inferiore) dei box a livello di blocco — i margini orizzontali non collassano mai.
Collasso dei margini
p.one {
margin: 20px 0;
}
p.two {
margin: 35px 0;
}Nel codice sopra, <p class="one"> ha un margine verticale di 20px e <p class="two"> ha un margine verticale di 35px. Ci si potrebbe aspettare che lo spazio tra loro sia 20 + 35 = 55px. A causa del collasso dei margini, lo spazio effettivo è 35px — il maggiore dei due.
Per evitare che due margini collassino, separarli con qualcosa: aggiungere un bordo o un padding al genitore, oppure collocare gli elementi in contesti di formattazione diversi (ad esempio impostando display: flex o display: grid sul contenitore, dove i margini non collassano mai).
Esempio di collasso dei margini:
Esempio di collasso dei margini
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.one {
margin: 20px 0;
}
p.two {
margin: 35px 0;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="two">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>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| auto | Imposta il margine inferiore. È il valore predefinito di questa proprietà. | Provalo » |
| length | Definisce un margine inferiore in px, pt, cm, ecc. Il valore predefinito è 0. | Provalo » |
| % | Imposta il margine inferiore in % dell'elemento contenitore. | Provalo » |
| initial | Fa sì che la proprietà utilizzi il suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
margin-top— il corrispondente verticale che imposta lo spazio sopra un elemento (e che collassa conmargin-bottom).margin— la shorthand che imposta tutti e quattro i lati contemporaneamente.padding-bottom— spazio all'interno del bordo inferiore dell'elemento, all'interno del suo bordo.box-sizing— controlla come vengono misurati larghezza e altezza; contesto utile quando si ragiona sul box model.