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 CSS-Eigenschaft legt den Margin-Bereich auf der rechten Seite eines Elements fest. Ein positiver Wert platziert ihn weiter von seinen Nachbarn entfernt, während ein negativer Wert ihn näher hinrückt.

Probieren Sie es aus

margin-right: 1em;

margin-right: 10%;

margin-right: 10px;

margin-right: 0;

<section id="default-example">
  <div id="container">
    <div class="col"></div>
    <div class="col transition-all" id="example-element"></div>
    <div class="col"></div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #5b6dcd 10px;
  background-color: rgba(229, 232, 252, 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgba(255, 244, 219, 0.6);
}

Die vertikalen Ränder von zwei benachbarten Boxen können verschmelzen. Dies wird als Margin-Kollaps 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 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 Margins als fester Wert.

Für ankerpositionierte Elemente löst sich die anchor-size()-Funktion auf einen <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Festlegen des Element-Margins basierend auf der Ankergröße).

<percentage>

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

auto

Der rechte Margin erhält einen Anteil des ungenutzten Horizontalraums, der hauptsächlich durch den verwendeten Layoutmodus bestimmt wird. Sind sowohl margin-left als auch margin-right auf auto gesetzt, 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 er auf den Wert gesetzt, der das Element innerhalb seines Elternteils 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 Margins, 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 er auf den Wert gesetzt, der den Randbereich innerhalb der verfügbaren `width` zentriert, falls fixiert.	Absolut positionierter Layout-Modus
`flex`, `inline-flex`	beliebig	beliebig	`0`, außer es gibt ungenutzten positiven horizontalen Raum. In diesem Fall wird er gleichmäßig auf alle horizontalen `auto`-Margins 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

Rechter Margin 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

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