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

css
/* <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.

<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 und margin-right beide auf auto 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 oder relative 0 Inline-Layout-Modus
block, inline, inline-block, block, table, inline-table, list-item, table-caption any static oder relative 0, außer wenn sowohl margin-left als auch margin-right auf auto 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 oder right static oder relative 0 Block-Layout-Modus (fließendes Element)
any table-*, außer table-caption any any 0 Interne table-*-Elemente haben keine Abstandsbereiche, nutzen Sie stattdessen border-spacing.
any, außer flex, inline-flex, oder table-* any fixed oder absolute 0, außer wenn sowohl margin-left als auch margin-right auf auto gesetzt sind. In diesem Fall wird der Wert gesetzt, der den Randbereich innerhalb der verfügbaren width 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 horizontalen auto-Abstände verteilt. Flexbox-Layout-Modus

Formale Definition

Anfangswert0
Anwendbar aufalle Elemente außer Elemente mit Tabellen-display-Typen, die nicht table-caption, table und inline-table entsprechen. Auch anwendbar auf ::first-letter.
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge
AnimationstypLä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

css
.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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin-right
anchor-size()
Experimental
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