`margin-right` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die margin-right CSS-Eigenschaft legt den Randbereich auf der rechten Seite eines Elements fest. Ein positiver Wert entfernt es weiter von seinen Nachbarn, während ein negativer Wert es näher platziert.

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: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

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

Die vertikalen Ränder zweier angrenzender Boxen können verschmelzen. Dies wird als Randzusammenfall 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(--my-anchor 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 ein <length>, oder ein <percentage> angegeben. Ihr Wert kann positiv, null oder negativ sein.

Werte

<length>

Die Größe des Randes 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. (siehe Festlegen des Randes eines Elements basierend auf der Ankergröße).

<percentage>

Die Größe des Randes als Prozentsatz relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch writing-mode) des umschließenden 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 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`	irgendein	`static` oder `relative`	`0`	Inline-Layout-Modus
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	irgendein	`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 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)
irgendetwas `table-`, außer* `table-caption`	irgendein	irgendein	`0`	Interne `table-*`-Elemente haben keine Ränder, verwenden Sie stattdessen `border-spacing`
irgendetwas, außer `flex`, `inline-flex`, oder `table-*`	irgendein	`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 fest.	Absolut positionierter Layout-Modus
`flex`, `inline-flex`	irgendein	irgendein	`0`, außer wenn es positiven horizontalen freien Raum gibt. In diesem Fall wird er 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

Festlegen des rechten Randes mit Pixeln und Prozentsätzen

css

.content {
  margin-right: 5%;
}
.side-box {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}

Spezifikationen

Spezifikation
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

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

margin-right CSS property

Help improve MDN

`margin-right` CSS property