margin-left

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-left CSS Eigenschaft legt den Randbereich auf der linken Seite eines Elements fest. Ein positiver Wert platziert es weiter von seinen Nachbarn entfernt, während ein negativer Wert es näher platziert.

Probieren Sie es aus

Die vertikalen Ränder zweier benachbarter Boxen können miteinander verschmelzen. Dies wird Randkollaps genannt.

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

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(--myAnchor width, 20px) / 4);

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

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

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

Werte

<length>

Die Größe des Randes als fester Wert.

Für ankerpositionierte Elemente wird die Funktion anchor-size() zu einem <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements aufgelöst (siehe Einstellung des Randes eines Elements 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 Containing Block.

auto

Der linke Rand 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`	irgendein	`static` oder `relative`	`0`	Inline-Layout-Modus
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	irgendein	`static` oder `relative`	`0`, es sei denn, sowohl `margin-left` als auch `margin-right` sind auf `auto` gesetzt. In diesem Fall wird es auf den Wert gesetzt, der das Element innerhalb seines übergeordneten Elements 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 (schwebendes Element)
irgendein `table-`, außer* `table-caption`	irgendein	irgendein	`0`	Interne `table-*` Elemente haben keine Ränder, verwenden Sie anstelle dessen `border-spacing`
jeglicher, außer `flex`, `inline-flex`, oder `table-*`	irgendein	`fixed` oder `absolute`	`0`, es sei denn, sowohl `margin-left` als auch `margin-right` sind auf `auto` gesetzt. In diesem Fall wird es auf den Wert gesetzt, der den Randbereich innerhalb der verfügbaren `width` zentriert, falls fest.	Absolut positionierter Layout-Modus
`flex`, `inline-flex`	irgendein	irgendein	`0`, es sei denn, es gibt irgendeinen positiven horizontalen Freiraum. In diesem Fall wird er gleichmäßig auf alle horizontalen `auto` Ränder 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

Einstellung von margin-left als Prozentsatz

Prozentuale Werte für margin-left sind relativ zur 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>

CSS

css

.example {
  margin-left: 50%;
}

Ergebnis

Spezifikationen

Specification
CSS Box Model Module Level 3 # margin-physical

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

margin-top, margin-right, und margin-bottom
margin Kurzform
margin-block-start, margin-block-end, margin-inline-start, und margin-inline-end
margin-block und margin-inline Kurzformen
CSS Box-Modell Modul