margin-right

La propietat CSS margin-right estableix l'àrea de marge en el costat dret d'un element . Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

/* <length> values */
margin-right: 20px;  /* An absolute length */
margin-right: 1em;   /* relative to the text size */
margin-right: 5%;    /* relative to the nearest block container's width */

/* Keyword values */
margin-right: auto;

/* Global values */
margin-right: inherit;
margin-right: initial;
margin-right: unset;

Els marges verticals de dues caixes adjacents es poden fusionar. Això es diu col.lapse de marge.

Sintaxi

La propietat margin-right és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

Valors

<length>

La grandària del marge com a valor fix.

<percentage>

La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.

auto

El marge esquerre rep una part de l'espai horitzontal no utilitzat, tal com es determina principalment pel mode de disseny que s'utilitza. Si els valors de margin-left i margin-right sòn auto, l'espai calculat es distribueix de manera uniforme. Aquesta taula resumeix els diferents casos:

Valor de display	Valor de float	Valor de position	Valor calculat d'auto	Comment
inline, inline-block, inline-table	qualsevol	static o relative	0	Mode de disseny en línia
block, inline, inline-block, block, table, inline-table, list-item, table-caption	qualsevol	static o relative	0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'element dins del seu pare.	Mode de disseny de block
block, inline, inline-block, block, table, inline-table, list-item, table-caption	left o right	static o relative	0	Mode de disseny de block (element flotant)
qualsevol table-*, excepte table-caption	qualsevol	qualsevol	0	Els elements interns de table-* no tenen marges, utilitzeu border-spacing en el seu lloc
qualsevol , excepte flex, inline-flex, or table-*	qualsevol	fixed o absolute	0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'àrea de vora dins de width disponible, si es fixa.	Mode de disseny absolutament posicionat
flex, inline-flex	qualsevol	qualsevol	0, excepte si hi ha algun espai lliure horitzontal positiu. En aquest cas, es distribueix uniformement a tots els marges auto horitzontals.	Mode de disseny Flexbox

Sintaxi formal

<length> | <percentage> | auto

Exemples

.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo    { margin-right: -5px; }

Especificacions

Navegadors compatibles

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!