margin

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Die margin-Kurzform-Eigenschaft von CSS legt den Randbereich auf allen vier Seiten eines Elements fest.

Probieren Sie es aus

margin: 1em;

margin: 5% 0;

margin: 10px 50px 20px;

margin: 10px 50px 20px 0;

margin: 0;

<section id="default-example">
  <div id="container">
    <div class="row"></div>
    <div class="row transition-all" id="example-element"></div>
    <div class="row"></div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

.row {
  height: 33.33%;
  display: inline-block;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
}

Zuordnende Eigenschaften

Diese Eigenschaft ist eine Kurzform 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(--my-anchor 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 entweder ein <length>, ein <percentage> oder das Schlüsselwort auto. Negative Werte ziehen das Element näher an seine Nachbarn als standardmäßig.

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

Werte

<length>

Die Größe des Randes als fester Wert.

Bei ankerpositionierten Elementen wird die anchor-size()-Funktion auf einen <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements aufgelöst (siehe Festlegen der Elementrand 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 umgebenden Blocks.

auto

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

Anfangswert	wie die jeweiligen Kurzschreibweisen: `margin-bottom`: `0` `margin-left`: `0` `margin-right`: `0` `margin-top`: `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	wie 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
Animationstyp	Lä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 */