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 platziert es weiter von seinen Nachbarn entfernt, während ein negativer Wert es näher rückt.

Probieren Sie es aus

Die vertikalen Ränder von zwei benachbarten 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 */

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

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

Die margin-right Eigenschaft wird als das Schlüsselwort auto, oder eine <length>, oder ein <percentage> angegeben. Ihr Wert kann positiv, null oder negativ sein.

Werte

<length>

Die Größe des Randes als fester Wert.

<percentage>

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

auto

Der rechte Rand erhält einen Anteil des nicht genutzten horizontalen Raums, der hauptsächlich durch den verwendeten Layout-Modus bestimmt wird. Wenn sowohl margin-left als auch margin-right 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 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 der Wert so gesetzt, dass das Element innerhalb seines übergeordneten Elements zentriert wird. 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 border-spacing stattdessen
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 der Wert so gesetzt, dass der Randbereich innerhalb der verfügbaren width zentriert wird, wenn festgelegt. Absolut positionierter Layout-Modus
flex, inline-flex beliebig beliebig 0, außer wenn horizontaler freier Raum vorhanden ist. In diesem Fall wird er gleichmäßig auf alle horizontalen auto Ränder verteilt. Flexbox-Layout-Modus

Formale Definition

Initialer Wert0
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

Rechten Rand mit Pixeln und Prozentsätzen festlegen

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