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 setzt den Abstandbereich auf der rechten Seite eines Elements. Ein positiver Wert platziert es weiter von seinen Nachbarn entfernt, 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 Abstände 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 margin-right-Eigenschaft 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 Abstands als fester Wert.

<percentage>

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

auto

Der rechte Abstand erhält einen Anteil des ungenutzten horizontalen Raums, der hauptsächlich durch den verwendeten Layoutmodus 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 beliebig static oder relative 0 Inline-Layoutmodus
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 eingestellt, der das Element innerhalb seines Elternteils zentriert. Block-Layoutmodus
block, inline, inline-block, block, table, inline-table, list-item, table-caption left oder right static oder relative 0 Block-Layoutmodus (schwebendes Element)
beliebig table-*, außer table-caption beliebig beliebig 0 Interne table-* Elemente haben keine Abstände, 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 eingestellt, der den Randbereich innerhalb der verfügbaren Breite zentriert, wenn fixiert. Absolut positionierter Layoutmodus
flex, inline-flex beliebig beliebig 0, außer wenn positiver horizontaler Freiraum vorhanden ist. In diesem Fall wird er gleichmäßig auf alle horizontalen auto Abstände verteilt. Flexbox-Layoutmodus

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 Abstands 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

Siehe auch