margin-right
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die margin-right
-Eigenschaft (CSS) legt den Abstandsbereich auf der rechten Seite eines Elements fest. Ein positiver Wert vergrößert den Abstand zu benachbarten Elementen, während ein negativer Wert den Abstand verringert.
Probieren Sie es aus
Die vertikalen Ränder zweier benachbarter Boxen können verschmelzen. Dies wird als Margin Collapsing bezeichnet.
Syntax
/* <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 */
margin-right: anchor-size(self-block);
margin-right: calc(anchor-size(--myAnchor height, 20px) / 4);
/* Keyword values */
margin-right: auto;
/* Global values */
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: revert-layer;
margin-right: unset;
Die Eigenschaft margin-right
wird als das Schlüsselwort auto
, oder eine <length>
, oder <percentage>
angegeben. Der Wert kann positiv, null oder negativ sein.
Werte
<length>
-
Die Größe des Abstandsbereichs als fester Wert.
- Für ankergepositionierte Elemente löst die Funktion
anchor-size()
sich in einen<length>
-Wert auf, der relativ zur Breite oder Höhe des zugehörigen Ankerelements ist (siehe Festlegen des Randes eines Elements basierend auf der Ankergröße).
- Für ankergepositionierte Elemente löst die Funktion
<percentage>
-
Die Größe des Abstandsbereichs als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode
) des umfassenden Blocks. auto
-
Der rechte Abstand erhält einen Teil des nicht genutzten horizontalen Raums, der hauptsächlich durch den verwendeten Layout-Modus bestimmt wird. Wenn die Werte von
margin-left
undmargin-right
beide aufauto
gesetzt sind, wird der berechnete Raum gleichmäßig verteilt. Diese Tabelle fasst die verschiedenen Fälle zusammen:Wert von display
Wert von float
Wert von position
Berechneter Wert von auto
Kommentar inline
,inline-block
,inline-table
any static
oderrelative
0
Inline-Layout-Modus block
,inline
,inline-block
,block
,table
,inline-table
,list-item
,table-caption
any static
oderrelative
0
, außer wenn sowohlmargin-left
als auchmargin-right
aufauto
gesetzt sind. In diesem Fall wird der Wert gesetzt, der das Element innerhalb seines Eltern-Elements zentriert.Block-Layout-Modus block
,inline
,inline-block
,block
,table
,inline-table
,list-item
,table-caption
left
oderright
static
oderrelative
0
Block-Layout-Modus (fließendes Element) any table-*
, außertable-caption
any any 0
Interne table-*
-Elemente haben keine Abstandsbereiche, nutzen Sie stattdessenborder-spacing
.any, außer flex
,inline-flex
, odertable-*
any fixed
oderabsolute
0
, außer wenn sowohlmargin-left
als auchmargin-right
aufauto
gesetzt sind. In diesem Fall wird der Wert gesetzt, der den Randbereich innerhalb der verfügbarenwidth
zentriert, falls fixiert.Absolut positionierter Layout-Modus flex
,inline-flex
any any 0
, außer wenn ein positiver horizontaler Freiraum vorhanden ist. In diesem Fall wird dieser gleichmäßig auf alle horizontalenauto
-Abstände verteilt.Flexbox-Layout-Modus
Formale Definition
Anfangswert | 0 |
---|---|
Anwendbar auf | alle Elemente außer Elemente mit Tabellen-display -Typen, die nicht table-caption , table und inline-table entsprechen. Auch anwendbar auf ::first-letter . |
Vererbt | Nein |
Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge |
Animationstyp | Längenangabe |
Formale Syntax
margin-right =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Beispiele
Festlegen des rechten Abstandsbereichs mit Pixeln und Prozentsätzen
.content {
margin-right: 5%;
}
.side-box {
margin-right: 10px;
}
.logo {
margin-right: -5px;
}
Spezifikationen
Specification |
---|
CSS Box Model Module Level 3 # margin-physical |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
margin-right | ||||||||||||
anchor-size() | ||||||||||||
auto |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
Siehe auch
margin-top
,margin-bottom
, undmargin-left
margin
Kurzschreibweisemargin-block-start
,margin-block-end
,margin-inline-start
, undmargin-inline-end
margin-block
undmargin-inline
Kurzschreibweisen- CSS-Box-Modell-Modul