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.

Die margin CSS Kurzschreibweise legt den Außenabstand auf allen vier Seiten eines Elements fest.

Probieren Sie es aus

Bestimmungseigenschaften

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 eine <length>, ein <percentage>, oder das Schlüsselwort auto. Negative Werte ziehen das Element näher an seine Nachbarn heran, als es standardmäßig wäre.

  • Wenn ein Wert angegeben ist, gilt der gleiche Abstand für alle vier Seiten.
  • Wenn zwei Werte angegeben sind, gilt der erste Abstand für oben und unten, der zweite für links und rechts.
  • Wenn drei Werte angegeben sind, gilt der erste Abstand für oben, der zweite für rechts und links, der dritte für unten.
  • Wenn vier Werte angegeben sind, gelten die Abstände in folgender Reihenfolge: oben, rechts, unten und links (im Uhrzeigersinn).

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 Browser wählt einen geeigneten Abstand aus. Zum Beispiel kann dieser Wert in bestimmten Fällen verwendet werden, um ein Element zu zentrieren.

Beschreibung

Diese Eigenschaft kann verwendet werden, um einen Abstand auf allen vier Seiten eines Elements festzulegen. Abstände schaffen zusätzlichen Raum außerhalb eines Elements, im Gegensatz zu padding, welches zusätzlichen Raum innerhalb eines Elements schafft.

Die Abstände oben und unten haben keine Auswirkungen auf nicht-ersetzte Inline-Elemente, wie <span> oder <code>.

Horizontale Zentrierung

Sie können ein Element horizontal innerhalb seines Elternteils zentrieren, indem Sie margin: 0 auto; festlegen.

Eine häufigere Methode, um ein Element horizontal zu zentrieren, besteht darin, display: flex; und justify-content: center; auf einem Container festzulegen, was seine Flex-Element-Kinder zentriert.

Margin-Kollaps

Die oberen und unteren Abstände von Elementen werden manchmal zu einem einzigen Abstand zusammengefasst, der dem größeren der beiden Abstände entspricht. Siehe Margin-Kollaps beherrschen 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

BCD tables only load in the browser

Siehe auch