margin

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-CSS-Kurzschreibweise legt den Randbereich auf allen vier Seiten eines Elements fest.

Probieren Sie es aus

Bestandteil-Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css
/* apply to all four sides */
margin: 1em;
margin: -3px;

/* top and bottom | left and right */
margin: 5% auto;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* anchor-size() values */
margin: 5% anchor-size(width);
margin: calc(anchor-size(width) / 4) 1em 0
  anchor-size(--myAnchor self-inline, 50px);

/* Keyword values */
margin: auto;

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

Die margin-Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist ein <length>, ein <percentage> oder das Schlüsselwort auto. Negative Werte rücken das Element näher an seine Nachbarn heran, als es standardmäßig der Fall wäre.

  • Wird ein Wert angegeben, gilt derselbe Rand für alle vier Seiten.
  • Werden zwei Werte angegeben, gilt der erste Rand für oben und unten, der zweite für links und rechts.
  • Werden drei Werte angegeben, gilt der erste Rand für oben, der zweite für rechts und links, der dritte für unten.
  • Werden vier Werte angegeben, gelten die Ränder in der Reihenfolge oben, rechts, unten und links (im Uhrzeigersinn).

Werte

<length>

Die Größe des Randes als fester Wert.

<percentage>

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

auto

Der Browser wählt einen geeigneten Rand. Beispielsweise kann dieser Wert in bestimmten Fällen verwendet werden, um ein Element zu zentrieren.

Beschreibung

Diese Eigenschaft kann verwendet werden, um auf allen vier Seiten eines Elements einen Rand festzulegen. Ränder schaffen zusätzlichen Platz außerhalb eines Elements, im Gegensatz zu padding, welches zusätzlichen Platz innerhalb eines Elements schafft.

Die oberen und unteren Ränder haben keine Wirkung auf nicht-ersetzte Inline-Elemente, wie <span> oder <code>.

Horizontale Zentrierung

Ein Element kann horizontal innerhalb seines Elternelements zentriert werden, indem margin: 0 auto; gesetzt wird.

Eine häufigere Methode, ein Element horizontal zu zentrieren, ist das Setzen von display: flex; und justify-content: center; auf ein Container-Element, welches seine Flex-Element-Kindelemente zentriert.

Margin-Kollaps

Die oberen und unteren Ränder von Elementen werden manchmal zu einem einzigen Rand zusammengefasst, der dem größeren der beiden Ränder entspricht. Siehe Beherrschung des Margin-Kollaps für weitere Informationen.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
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 Wertwie die jeweiligen Kurzschreibweisen:
  • margin-bottom: der Prozentwert wie angegeben oder die absolute Länge
  • margin-left: der Prozentwert wie angegeben oder die absolute Länge
  • margin-right: der Prozentwert wie angegeben oder die absolute Länge
  • margin-top: der Prozentwert wie angegeben oder die absolute Länge
AnimationstypLängenangabe

Formale Syntax

margin = 
<'margin-top'>{1,4}

<margin-top> =
<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

Einfaches Beispiel

HTML

html
<div class="center">This element is centered.</div>

<div class="outside">This element is positioned outside of its container.</div>

CSS

css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

Weitere Beispiele

css
margin: 5%; /* All sides: 5% margin */

margin: 10px; /* All sides: 10px margin */

margin: 1.6em 20px; /* top and bottom: 1.6em margin */
/* left and right: 20px margin */

margin: 10px 3% -1em; /* top:            10px margin */
/* left and right: 3% margin   */
/* bottom:         -1em margin */

margin: 10px 3px 30px 5px; /* top:    10px margin */
/* right:  3px margin  */
/* bottom: 30px margin */
/* left:   5px margin  */

margin: 2em auto; /* top and bottom: 2em margin   */
/* Box is horizontally centered */

margin: auto; /* top and bottom: 0 margin     */
/* Box is horizontally centered */

Spezifikationen

Specification
CSS Box Model Module Level 3
# margin

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch