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 ⁨Juli 2015⁩.

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

Die margin-left-Eigenschaft von CSS legt den Randbereich auf der linken Seite eines Elements fest. Ein positiver Wert vergrößert den Abstand zum Nachbarelement, während ein negativer Wert den Abstand verkleinert.

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 Ränder zweier angrenzender Boxen können verschmelzen. Dies wird als margin collapsing bezeichnet.

In den seltenen Fällen, in denen die Breite überbeschränkt ist (d.h. wenn width, margin-left, border, padding, der Inhaltsbereich und margin-right alle definiert sind), wird margin-left ignoriert und erhält 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(--my-anchor 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 mit dem Schlüsselwort auto, oder einer <length>, oder einem <percentage> angegeben. Sein Wert kann positiv, null oder negativ sein.

Werte

<length>

Die Größe des Randes als fester Wert.

Für ankergebundene Elemente löst sich die anchor-size()-Funktion zu einem <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe: Rand von Elementen basierend auf der Ankergröße festlegen).

<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 linke Rand erhält einen Anteil des ungenutzten horizontalen Raums, der hauptsächlich durch den verwendeten Layoutmodus 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`	any	`static` oder `relative`	`0`	Inline-Layoutmodus
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	any	`static` oder `relative`	`0`, außer wenn sowohl `margin-left` als auch `margin-right` auf `auto` gesetzt sind. In diesem Fall wird es auf den Wert gesetzt, der das Element in seinem Elternteil zentriert.	Block-Layoutmodus
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	`left` oder `right`	`static` oder `relative`	`0`	Block-Layoutmodus (schwebendes Element)
any `table-`, außer* `table-caption`	any	any	`0`	Interne `table-*`-Elemente haben keine Ränder, verwenden Sie stattdessen `border-spacing`
any, außer `flex`, `inline-flex`, oder `table-*`	any	`fixed` oder `absolute`	`0`, außer wenn sowohl `margin-left` als auch `margin-right` auf `auto` gesetzt sind. In diesem Fall wird es auf den Wert gesetzt, der den Randbereich innerhalb der verfügbaren `width` zentriert, wenn er fest ist.	Absolut positionierter Layoutmodus
`flex`, `inline-flex`	any	any	`0`, außer wenn es horizontal freien Platz gibt. In diesem Fall wird er gleichmäßig auf alle horizontalen `auto`-Ränder verteilt.	Flexbox-Layoutmodus

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

Prozentuale Werte 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>

CSS

css

.example {
  margin-left: 50%;
}

Ergebnis

Spezifikationen

Specification
CSS Box Model Module Level 3 # margin-physical

Browser-Kompatibilität

Siehe auch

margin-top, margin-right, und margin-bottom
margin Shorthand
margin-block-start, margin-block-end, margin-inline-start, und margin-inline-end
margin-block und margin-inline Shorthands
CSS-Boxmodell Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden