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
/* 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.
- Für ankerpositionierte Elemente wird die
anchor-size()
-Funktion relativ zur Breite oder Höhe des zugehörigen Ankerelements auf einen<length>
-Wert aufgelöst (siehe Festlegen des Randes basierend auf der Ankergröße).
- Für ankerpositionierte Elemente wird die
<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
Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
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:
|
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
<div class="center">This element is centered.</div>
<div class="outside">This element is positioned outside of its container.</div>
CSS
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
Weitere Beispiele
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
margin | ||||||||||||
anchor-size() | ||||||||||||
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.