Proprietà CSS margin-right
Usa questa proprietà per impostare lo spazio del margine sul lato destro di un elemento. Scopri i valori e gli esempi.
La proprietà CSS margin-right imposta la larghezza dell'area del margine sul lato destro di un elemento — lo spazio trasparente tra il bordo destro dell'elemento e il contenuto adiacente o il blocco contenitore.
È una delle quattro proprietà di margine individuali — insieme a margin-top, margin-bottom e margin-left — che la forma abbreviata margin imposta tutte insieme. Usa margin-right quando vuoi regolare solo il gap sul lato destro, ad esempio per separare un'icona inline dal testo che la segue, o per allontanare un elemento float dal contenuto accanto a esso.
Questa pagina illustra la sintassi della proprietà, tutti i valori accettati (inclusi auto, % e lunghezze negative) e le regole da conoscere prima di utilizzarla.
I valori negativi sono consentiti. Un margin-right negativo avvicina (o sovrappone) il contenuto successivo, il che può essere utile per effetti di sovrapposizione, ma può causare sorprese nel layout.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. Il margine destro dell'elemento è animabile. |
| Versione | CSS2 |
| Sintassi DOM | object.style.marginRight = "50px"; |
Sintassi
margin-right: length | auto | initial | inherit;Esempi
Una lunghezza fissa in pixel
Il caso più semplice: riservare una quantità fissa di spazio a destra. Qui il paragrafo mantiene un gap di 400px sul lato destro, quindi non si estende più fino alla larghezza completa del contenitore.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
margin-right: 400px;
}
</style>
</head>
<body>
<h2>Margin-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Risultato
Un valore percentuale
Quando il valore è una percentuale, viene calcolato rispetto alla larghezza del blocco contenitore — non alla larghezza propria dell'elemento. Quindi margin-right: 50% lascia un gap pari alla metà della larghezza del contenuto del genitore.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
margin-right: 50%;
}
</style>
</head>
<body>
<h2>Margin-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Il valore auto
Per un elemento a livello di blocco, margin-right: auto consente al browser di riempire lo spazio disponibile a destra. Da solo ha scarso effetto visibile, ma combinato con margin-left: auto è il classico trucco per centrare orizzontalmente un blocco a larghezza fissa. Impostare solo margin-right: auto (con margin-left: 0) spinge un blocco verso il bordo sinistro.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
margin-right: auto;
}
</style>
</head>
<body>
<h2>Margin-right property example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="right">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| auto | Imposta il margine destro. È il valore predefinito di questa proprietà. | Provalo » |
| length | Definisce un margine destro in px, pt, cm, ecc. Il valore predefinito è 0. | Provalo » |
| % | Imposta il margine destro in % dell'elemento contenitore. | Provalo » |
| initial | Fa usare alla proprietà il suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Cose da tenere a mente
- I margini sono trasparenti. A differenza del padding, il margine si trova all'esterno del bordo e non mostra mai il colore di sfondo dell'elemento.
- I margini destri non si comprimono. La compressione dei margini avviene solo tra margini verticali adiacenti (
margin-top/margin-bottom). I margini orizzontali comemargin-rightsi sommano sempre. - Le percentuali fanno riferimento alla larghezza. Un valore in
%viene calcolato rispetto alla larghezza del blocco contenitore, anche se controlla lo spazio orizzontale. - Alternativa abbreviata. Se imposti più di un lato contemporaneamente, la forma abbreviata
marginè più breve:margin: 0 400px 0 0equivale amargin-right: 400pxcon zero sugli altri lati.