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.

Die margin-right CSS Eigenschaft legt den Randbereich auf der rechten Seite eines Elements fest. Ein positiver Wert vergrößert den Abstand zu seinen Nachbarn, ein negativer verringert ihn.

Probieren Sie es aus

Die vertikalen Ränder von zwei benachbarten Boxen können verschmelzen. Dies wird Margin Collapsing genannt.

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 Schlüsselwort auto, oder als <length>, oder als <percentage> angegeben. Der Wert kann positiv, null oder negativ sein.

Werte

<length>

Die Größe des Rands als fester Wert.

Für ankerpositionierte Elemente wird die Funktion anchor-size() zu einem <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements aufgelöst (siehe Einstellung des Elementrands basierend auf der Ankergröße).

<percentage>

Die Größe des Rands als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch writing-mode) des verbindenden Blocks.

auto

Der rechte Rand erhält einen Anteil des ungenutzten horizontalen Raums, der hauptsächlich durch den verwendeten Layout-Modus bestimmt wird. Wenn die Werte von margin-left und margin-right beide auto 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`	beliebig	`static` oder `relative`	`0`	Inline-Layout-Modus
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	beliebig	`static` oder `relative`	`0`, außer wenn sowohl `margin-left` als auch `margin-right` auf `auto` gesetzt sind. In diesem Fall wird es auf den Wert gesetzt, der das Element innerhalb des übergeordneten 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 (schwebendes Element)
beliebig `table-`, außer* `table-caption`	beliebig	beliebig	`0`	Interne `table-*`-Elemente haben keine Ränder, verwenden Sie stattdessen `border-spacing`
beliebig, außer `flex`, `inline-flex`, oder `table-*`	beliebig	`fixed` oder `absolute`	`0`, außer wenn sowohl `margin-left` als auch `margin-right` auf `auto` gesetzt sind. In diesem Fall wird es auf den Wert gesetzt, der den Randbereich innerhalb der verfügbaren `width` zentriert, wenn fixiert.	Absolut positionierter Layout-Modus
`flex`, `inline-flex`	beliebig	beliebig	`0`, außer wenn es positiven horizontalen freien Raum gibt. In diesem Fall wird dieser gleichmäßig auf alle horizontalen `auto`-Ränder 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

Rechten Rand mit Pixeln und Prozentsätzen setzen

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

BCD tables only load in the browser

Siehe auch

margin-top, margin-bottom, und margin-left
margin Kurzform
margin-block-start, margin-block-end, margin-inline-start, und margin-inline-end
margin-block und margin-inline Kurzformen
CSS-Box-Modell Modul