CSS Margin
Usa la proprietà CSS margin per creare spazio attorno al contenuto di un elemento HTML all'esterno dei bordi. Le proprietà per il margine sono top, bottom, left e right.
La proprietà CSS margin crea spazio attorno a un elemento — all'esterno del suo bordo. A differenza del padding, che aggiunge spazio all'interno del bordo (tra il contenuto e il bordo), il margin allontana gli elementi vicini. Il margin è sempre trasparente: non mostra mai un colore di sfondo, aggiunge soltanto spazio vuoto.
Questo capitolo tratta le quattro proprietà dei lati individuali, la proprietà abbreviata margin (da uno a quattro valori), i valori speciali auto e inherit, come vengono calcolati i margini percentuali, i margini negativi e la regola del collasso dei margini che sorprende quasi tutti la prima volta che la incontrano.
I lati individuali
Grazie alle seguenti proprietà puoi impostare il margin per ciascun lato di un elemento:
È già evidente che per il lato superiore si usa margin-top, per il basso margin-bottom, per il lato sinistro margin-left e per il destro margin-right.
Tutte le proprietà margin accettano i seguenti valori:
auto- il margin viene calcolato dal browser (usato per centrare orizzontalmente gli elementi a blocco),length- specifica un margin inpx,pt,cm,rem,em, ecc.,%- specifica un margin come percentuale della larghezza dell'elemento contenitore,inherit- specifica che il margin deve essere ereditato dall'elemento padre.
Un dettaglio sottile ma importante: i margini percentuali sono sempre relativi alla larghezza del blocco contenitore, anche per margin-top e margin-bottom. Quindi margin-top: 10% all'interno di un contenitore largo 600px corrisponde a 60px, non al 10% dell'altezza.
Il margin può anche assumere valori negativi, che avvicinano un elemento ai suoi vicini (o lo sovrappone ad essi). Vedi Margini negativi più avanti.
Margin come proprietà abbreviata
La proprietà CSS margin è una proprietà abbreviata per le singole proprietà margin indicate di seguito:
Quando la proprietà margin ha quattro valori diversi, nel codice si presenta così:
CSS con margini diversi
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}Se tutti i lati hanno lo stesso valore, ad esempio tutti i lati sono 50px, in CSS possiamo scriverlo così.
CSS con lo stesso margin, codice
p {
margin: 50px;
}Quando i lati superiore e inferiore hanno lo stesso valore (ad esempio, 15px) e i lati sinistro e destro hanno lo stesso valore (ad esempio, 10px), puoi usare il seguente codice.
CSS margin con 2 numeri, codice
p {
margin: 15px 10px;
}Questo equivale a:
CSS margin con 2 numeri, versione estesa, codice
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}Quando i lati sinistro e destro sono uguali (ad esempio, 15px), il lato superiore è 5px e il lato inferiore è 10px, puoi scrivere:
CSS margin con 3 numeri, codice
p {
margin: 5px 15px 10px;
}Questo equivale a:
CSS margin con 3 numeri, versione estesa, codice
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Esempio della proprietà margin:
Codice della proprietà CSS margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Risultato
Il valore auto della proprietà margin
Puoi centrare orizzontalmente un elemento all'interno del suo contenitore impostando la proprietà margin su auto. Di conseguenza, l'elemento occuperà la larghezza definita e lo spazio rimanente verrà diviso equamente tra i margini destro e sinistro.
Esempio della proprietà margin con il valore "auto":
Esempio di utilizzo del valore "auto" della proprietà margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<h2>The auto value</h2>
<p>
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
</p>
<div>
The auto value horizontally centered this div.
</div>
</body>
</html>Il valore inherit della proprietà margin
Nell'esempio seguente, il margin sinistro dell'elemento <p> viene ereditato dal suo elemento padre (<div>):
Esempio della proprietà margin con il valore "inherit":
Esempio di utilizzo del valore "inherit" della proprietà margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
margin-left: 100px;
}
p.inherit {
margin-left: inherit;
padding: 10px 0;
}
</style>
</head>
<body>
<h2>The inherit value</h2>
<p>
Here the left margin is inherited from its parent element:
</p>
<div>
<p class="inherit">
With the help of the "inherit" value, the left margin is inherited from the div element.
</p>
</div>
</body>
</html>Collasso dei margini
Quando due margini verticali si incontrano, non si sommano — si collassano in un unico margin pari al maggiore dei due. Questa è la sorpresa più comune con i margini: se un paragrafo ha margin-bottom: 30px e il successivo ha margin-top: 20px, lo spazio tra di loro è 30px, non 50px.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.top { margin-bottom: 30px; background: #1c87c9; color: #fff; }
.bottom { margin-top: 20px; background: #2eae44; color: #fff; }
</style>
</head>
<body>
<p class="top">My bottom margin is 30px.</p>
<p class="bottom">My top margin is 20px. The gap between us is 30px, not 50px.</p>
</body>
</html>Alcune regole da ricordare:
- Solo i margini superiori e inferiori collassano. I margini sinistro e destro (orizzontali) non collassano mai — si sommano sempre.
- Un elemento padre e il suo primo/ultimo figlio possono collassare insieme a meno che qualcosa li separi (un bordo, del padding, un
overflowdiverso davisible, o un contenitore flex/grid). - Gli elementi vuoti collassano i propri margini superiore e inferiore in uno solo.
Se hai bisogno di uno spazio garantito, preferisci il padding, un bordo, o usa un layout flex/grid con gap — i margini all'interno dei contenitori flex e grid non collassano.
Margini negativi
Un margin negativo avvicina un elemento nella direzione del margin, sovrapponendosi spesso al vicino. Un margin-top o margin-left negativo sposta l'elemento stesso; un margin-right o margin-bottom negativo avvicina il contenuto successivo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
background-color: #1c87c9;
color: #fff;
padding: 10px;
}
.pulled {
margin-top: -15px;
}
</style>
</head>
<body>
<div class="box">First box</div>
<div class="box pulled">This box is pulled 15px up to overlap the first one.</div>
</body>
</html>I margini negativi sono utili per sovrapporre card, estrarre un elemento dal padding del suo contenitore o perfezionare l'allineamento — ma usali con parsimonia, poiché possono creare sovrapposizioni difficili da debuggare.
Proprietà margin logiche
Il CSS moderno offre anche proprietà logiche che seguono la direzione della scrittura del testo invece dei lati fisici dello schermo — utili per siti che supportano sia le lingue da sinistra a destra che quelle da destra a sinistra:
margin-inline-start/margin-inline-end— l'inizio/fine dell'asse inline (del testo),margin-block-start/margin-block-end— l'inizio/fine dell'asse block,- le abbreviazioni
margin-inlineemargin-block(ad es.margin-inline: autoper centrare orizzontalmente sia in LTR che in RTL).
In una pagina standard da sinistra a destra, margin-inline-start si comporta come margin-left e margin-block-start come margin-top, ma si invertono automaticamente per i contenuti da destra a sinistra.
Capitoli correlati
- CSS Padding — spazio all'interno del bordo.
- CSS box-sizing — come larghezza, padding e bordo vengono sommati.
- margin-top, margin-right, margin-bottom, margin-left — le proprietà dei lati individuali.