W3docs
de
Anmelden

CSS margin-right Eigenschaft

Mit dieser Eigenschaft legen Sie den Außenabstand auf der rechten Seite eines Elements fest. Werte und Beispiele.

Die CSS-Eigenschaft margin-right legt die Breite des Außenabstandsbereichs auf der rechten Seite eines Elements fest — der transparente Abstand zwischen dem rechten Rahmen des Elements und dem benachbarten Inhalt oder dem umgebenden Block.

Sie ist eine der vier einzelnen Margin-Eigenschaften — zusammen mit margin-top, margin-bottom und margin-left — die die Kurzschreibweise margin alle auf einmal setzt. Verwenden Sie margin-right, wenn Sie nur den Abstand auf der rechten Seite anpassen möchten, zum Beispiel um ein Inline-Icon vom nachfolgenden Text zu trennen oder ein float-Element vom danebenstehenden Inhalt wegzuschieben.

Diese Seite behandelt die Syntax der Eigenschaft, alle akzeptierten Werte (einschließlich auto, % und negative Längen) sowie die Regeln, die Sie vor der Verwendung kennen sollten.

Info

Negative Werte sind erlaubt. Ein negativer margin-right-Wert zieht den nachfolgenden Inhalt näher heran (oder lässt ihn überlappen), was gelegentlich für Überlappungseffekte nützlich ist, aber zu unerwarteten Layout-Überraschungen führen kann.

Anfangswert0
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbtNein.
AnimierbarJa. Der rechte Außenabstand des Elements ist animierbar.
VersionCSS2
DOM-Syntaxobject.style.marginRight = "50px";

Syntax

margin-right: length | auto | initial | inherit;

Beispiele

Eine feste Länge in Pixeln

Der einfachste Fall: Ein fixer Abstand auf der rechten Seite wird reserviert. Hier behält der Absatz einen 400px-Abstand auf seiner rechten Seite, sodass er sich nicht mehr über die volle Containerbreite erstreckt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right {
        margin-right: 400px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Probier es selbst »

Ergebnis

Ein Absatz mit einem 400px-Außenabstand rechts, der schmaler als der umgebende Text angezeigt wird

Ein Prozentwert

Wenn der Wert ein Prozentwert ist, wird er relativ zur Breite des umgebenden Blocks berechnet — nicht zur eigenen Breite des Elements. So hinterlässt margin-right: 50% einen Abstand, der der Hälfte der Inhaltsbreite des übergeordneten Elements entspricht.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right {
        margin-right: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Probier es selbst »

Der auto-Wert

Bei einem Block-Level-Element lässt margin-right: auto den Browser den verfügbaren Platz auf der rechten Seite füllen. Allein hat es kaum sichtbare Auswirkungen, aber in Kombination mit margin-left: auto ist es der klassische Trick zum horizontalen Zentrieren eines Blocks mit fester Breite. Wenn nur margin-right: auto gesetzt wird (mit margin-left: 0), wird ein Block an den linken Rand gedrückt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right {
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
    <p class="right">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
autoSetzt den rechten Außenabstand. Dies ist der Standardwert der Eigenschaft.Ausprobieren »
lengthDefiniert einen rechten Außenabstand in px, pt, cm usw. Der Standardwert ist 0.Ausprobieren »
%Setzt den rechten Außenabstand in % des umgebenden Elements.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

Wichtige Hinweise

  • Margins sind transparent. Anders als Padding liegt der Außenabstand außerhalb des Rahmens und zeigt niemals die Hintergrundfarbe des Elements.
  • Rechte Margins kollabieren nicht. Das Kollabieren von Margins findet nur zwischen benachbarten vertikalen Margins statt (margin-top / margin-bottom). Horizontale Margins wie margin-right addieren sich immer.
  • Prozentwerte beziehen sich auf die Breite. Ein %-Wert wird anhand der Breite des umgebenden Blocks aufgelöst, auch wenn er horizontalen Abstand steuert.
  • Kurzschreibweise als Alternative. Wenn Sie mehr als eine Seite gleichzeitig setzen, ist die Kurzschreibweise margin kürzer: margin: 0 400px 0 0 entspricht margin-right: 400px plus Nullen anderswo.

Übungen

Übung
Was bewirkt die CSS-Eigenschaft 'margin-right'?
Was bewirkt die CSS-Eigenschaft 'margin-right'?
Was this page helpful?