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.
Initial value | 0 |
---|---|
Applies to | all elements, except elements with table display types other than table-caption , table and inline-table . It also applies to ::first-letter . |
Inherited | no |
Percentages | refer to the width of the containing block |
Media | visual |
Computed value | the percentage as specified or the absolute length |
Animation type | a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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
imargin-right
sònauto
, 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
orelative
0
Mode de disseny en línia block
,inline
,inline-block
,block
,table
,inline-table
,list-item
,table-caption
qualsevol static
orelative
0
, excepte si tantmargin-left
imargin-right
s'estableixen enauto
. 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
oright
static
orelative
0
Mode de disseny de block (element flotant) qualsevol table-*
, exceptetable-caption
qualsevol qualsevol 0
Els elements interns de table-*
no tenen marges, utilitzeuborder-spacing
en el seu llocqualsevol , excepte flex
,inline-flex
, ortable-*
qualsevol fixed
oabsolute
0
, excepte si tantmargin-left
imargin-right
s'estableixen enauto
. En aquest cas, s'estableix el valor que centra l'àrea de vora dins dewidth
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 margesauto
horitzontals.Mode de disseny Flexbox
Sintaxi formal
<length> | <percentage> | auto
Exemples
.content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; }
Especificacions
Especificació | Estat | Comentari |
---|---|---|
CSS Basic Box Model The definition of 'margin-right' in that specification. |
Working Draft | No hi ha cap canvi significatiu |
CSS Transitions The definition of 'margin-right' in that specification. |
Working Draft | Defineix margin-right com animable. |
CSS Flexible Box Layout Module The definition of 'margin-right' in that specification. |
Candidate Recommendation | Defineix el comportament de margin-right en elements flex. |
CSS Level 2 (Revision 1) The definition of 'margin-right' in that specification. |
Recommendation | Elimina el seu efecte en els elements en línia |
CSS Level 1 The definition of 'margin-right' in that specification. |
Recommendation | Definició inicial. |
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!
Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 (85) |
valor |
1.0 | (Yes) | 1.0 (1.7 or earlier) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
Descripció | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 |