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 Kurzform-Eigenschaft 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;
}
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzform 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 spezifiziert werden. Jeder Wert ist eine <length>
, ein <percentage>
oder das Schlüsselwort auto
. Negative Werte ziehen das Element näher zu seinen Nachbarn, als es standardmäßig der Fall wäre.
- Wenn ein Wert angegeben ist, gilt er für alle vier Seiten.
- Wenn zwei Werte angegeben sind, gilt der erste Rand für oben und unten, der zweite für links und rechts.
- Wenn drei Werte angegeben sind, gilt der erste Rand für oben, der zweite für rechts und links, der dritte für unten.
- Wenn vier Werte angegeben sind, 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 löst die
anchor-size()
-Funktion zu einem<length>
-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Festlegen des Randes eines Elements basierend auf der Ankergröße).
- Für ankerpositionierte Elemente löst die
<percentage>
-
Die Größe des Randes als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode
) des enthältenden Blocks. auto
-
Der Browser wählt einen geeigneten Rand aus. In bestimmten Fällen kann dieser Wert beispielsweise verwendet werden, um ein Element zu zentrieren.
Beschreibung
Diese Eigenschaft kann verwendet werden, um einen Rand auf allen vier Seiten eines Elements festzulegen. Ränder erzeugen zusätzlichen Raum um ein Element herum, im Gegensatz zu padding
, das zusätzlichen Raum innerhalb eines Elements erzeugt.
Die oberen und unteren Ränder haben keinen Effekt auf nicht-ersetzte Inline-Elemente, wie <span>
oder <code>
.
Horizontale Zentrierung
Sie können ein Element horizontal innerhalb seines übergeordneten Elements zentrieren, indem Sie margin: 0 auto;
einstellen.
Eine gängigere Methode, um ein Element horizontal zu zentrieren, besteht darin, display: flex;
und justify-content: center;
auf einem Container festzulegen, der seine Flex-Elemente zentriert.
Rand-Kollaps
Die oberen und unteren Ränder von Elementen werden manchmal zu einem einzigen Rand zusammengeklappt, der dem größeren der beiden Ränder entspricht. Weitere Informationen finden Sie unter Beherrschung des Rand-Kollaps.
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
Siehe auch
margin-top
,margin-right
,margin-bottom
, undmargin-left
margin-block-start
,margin-block-end
,margin-inline-start
, undmargin-inline-end
margin-block
undmargin-inline
Kurzformen- Beherrschung des Rand-Kollaps
- Einführung in das CSS-Box-Modell Leitfaden
- CSS-Box-Modell Modul