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 Margin-Bereich 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 von zwei angrenzenden Boxen können verschmelzen. Dies wird als Margin-Kollaps bezeichnet.
In den seltenen Fällen, in denen die Breite übermäßig eingeschränkt wird (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
/* <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 */
/* 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 das Schlüsselwort auto
, oder als <length>
, oder ein <percentage>
angegeben. Ihr Wert kann positiv, null oder negativ sein.
Werte
<length>
-
Die Größe des Randes als fester Wert.
<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 Layout-Modus bestimmt wird. Wenn die Werte von
margin-left
undmargin-right
beideauto
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
oderrelative
0
Inline-Layoutmodus block
,inline
,inline-block
,block
,table
,inline-table
,list-item
,table-caption
beliebig static
oderrelative
0
, außer wenn sowohlmargin-left
als auchmargin-right
aufauto
gesetzt sind. In diesem Fall wird er auf den Wert gesetzt, der das Element innerhalb seines Elternelements zentriert.Block-Layoutmodus block
,inline
,inline-block
,block
,table
,inline-table
,list-item
,table-caption
left
oderright
static
oderrelative
0
Block-Layoutmodus (schwebendes Element) alle table-*
, außertable-caption
beliebig beliebig 0
Interne table-*
-Elemente haben keine Ränder, verwenden Sie stattdessenborder-spacing
alle, außer flex
,inline-flex
, odertable-*
beliebig fixed
oderabsolute
0
, außer wenn sowohlmargin-left
als auchmargin-right
aufauto
gesetzt sind. In diesem Fall wird auf den Wert gesetzt, der den Randbereich innerhalb der verfügbarenwidth
, wenn fest, zentriert.Absolut positionierter Layoutmodus flex
,inline-flex
beliebig beliebig 0
, außer wenn positiver horizontaler Freiraum vorhanden ist. In diesem Fall wird es gleichmäßig auf alle horizontalenauto
-Ränder verteilt.Flexbox-Layoutmodus
Formale Definition
Initialer Wert | 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 setzen
Prozentsatzwerte für margin-left
sind relativ zur Inline-Größe des Containers.
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
.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
, undmargin-bottom
margin
Kurzformmargin-block-start
,margin-block-end
,margin-inline-start
, undmargin-inline-end
margin-block
undmargin-inline
Kurzformen- CSS-Box-Modell-Modul