`margin-left` CSS property

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft margin-left legt den Außenabstandsbereich auf der linken Seite eines Elements fest. Ein positiver Wert platziert ihn weiter von seinen Nachbarn entfernt, während ein negativer Wert ihn näher platziert.

Probieren Sie es aus

margin-left: 1em;

margin-left: 10%;

margin-left: 10px;

margin-left: 0;

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

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

.col {
  width: 33.33%;
  border: solid #5b6dcd 10px;
  background-color: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgb(255 244 219 / 0.6);
}

Die vertikalen Außenabstände zweier benachbarter Boxen können zusammenfallen. Dies wird als margin collapsing bezeichnet.

In den seltenen Fällen, in denen die Breite überbestimmt ist (d.h. wenn width, margin-left, border, padding, der Inhaltsbereich und margin-right alle definiert sind), wird margin-left ignoriert und hat denselben berechneten Wert, als wäre der Wert auto angegeben worden.

Syntax

css

/* <length> values */
margin-left: 10px; /* An absolute length */
margin-left: 1em; /* relative to the text size */
margin-left: 5%; /* relative to the nearest block container's width */
margin-left: anchor-size(self-inline);
margin-left: calc(anchor-size(--my-anchor width, 20px) / 4);

/* Keyword value */
margin-left: auto;

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

Die Eigenschaft margin-left wird als Schlüsselwort auto, als <length> oder als <percentage> angegeben. Ihr Wert kann positiv, null oder negativ sein.

Werte

<length>

Die Größe des Außenabstands als fester Wert.

Für anchor-positioned elements wird die Funktion anchor-size() zu einem <length>-Wert relativ zur Breite oder Höhe des zugehörigen anchor element aufgelöst (siehe Festlegen des Element-Außenabstands anhand der Ankergröße).

<percentage>

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

auto

Der linke Außenabstand erhält einen Anteil des ungenutzten horizontalen Raums, der hauptsächlich durch den verwendeten Layout-Modus bestimmt wird. Wenn die Werte von margin-left und margin-right beide auto sind, wird der berechnete Raum gleichmäßig verteilt. Diese Tabelle fasst die verschiedenen Fälle zusammen:

Wert von `display`	Wert von `float`	Wert von `position`	Berechneter Wert von `auto`	Kommentar
`inline`, `inline-block`, `inline-table`	beliebig	`static` oder `relative`	`0`	Inline-Layout-Modus
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	beliebig	`static` oder `relative`	`0`, außer wenn sowohl `margin-left` als auch `margin-right` auf `auto` gesetzt sind. In diesem Fall wird er auf den Wert gesetzt, der das Element innerhalb seines Elternelements zentriert.	Block-Layout-Modus
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	`left` oder `right`	`static` oder `relative`	`0`	Block-Layout-Modus (floated element)
beliebiges `table-`, außer* `table-caption`	beliebig	beliebig	`0`	Interne `table-*`-Elemente haben keine Außenabstände; verwenden Sie stattdessen `border-spacing`
beliebig, außer `flex`, `inline-flex` oder `table-*`	beliebig	`fixed` oder `absolute`	`0`, außer wenn sowohl `margin-left` als auch `margin-right` auf `auto` gesetzt sind. In diesem Fall wird er auf den Wert gesetzt, der den Rahmenbereich innerhalb der verfügbaren `width` zentriert, sofern diese festgelegt ist.	Layout-Modus für absolut positionierte Elemente
`flex`, `inline-flex`	beliebig	beliebig	`0`, außer wenn positiver horizontaler freier Raum vorhanden ist. In diesem Fall wird er gleichmäßig auf alle horizontalen `auto`-Außenabstände verteilt.	Flexbox-Layout-Modus

Formale Definition

Anfangswert	`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	der Prozentwert wie angegeben oder die absolute Länge
Animationstyp	Längenangabe

Formale Syntax

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

margin-left als Prozentsatz festlegen

Prozentwerte für margin-left beziehen sich auf die Inline-Größe des Containers.

HTML

html

<p>
  A large rose-tree stood near the entrance of the garden: the roses growing on
  it were white, but there were three gardeners at it, busily painting them red.
</p>
<p class="example">
  Alice thought this a very curious thing, and she went nearer to watch them,
  and just as she came up to them she heard one of them say, "Look out now,
  Five! Don't go splashing paint over me like that!"
</p>
<p>
  "I couldn't help it," said Five, in a sulky tone; "Seven jogged my elbow."
</p>