CSS-Eigenschaft margin-left

Die Eigenschaft margin-left definiert die linke Margin des Elements.

Es gibt einige seltene Situationen, wenn die Eigenschaften width, margin-left, border, padding, content und margin-right definiert sind. Wenn das der Fall ist, wird margin-left ignoriert und es wird so eingestellt, als ob der automatische Wert definiert wäre.

Anfangswert	0
Gilt für	Alle Elemente. Es gilt auch für ::first-letter.
Geerbt	Nein
Animierbar	Ja, die linke Margin des Elements ist animeirbar.
Version	CSS2
DOM Syntax	object.style.marginLeft = "20px";

Negative Werte sind erlaubt.

Syntax

margin-left: length | auto | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .left { margin-left: 25px;}
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft margin-left</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
    <p class="left">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel, wo die linke Margin des Elements als "8em" definiert ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .left { margin-left: 8em;}
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft margin-left</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
    <p class="left">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
  </body>
</html>

Versuch es selber!

Hier ist die linke Margin durch "em", "px" und "%" angegeben, um die Unterschiede zwischen den Werten anzuzeigen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p.p1 {
      margin-left: 6em;
      }
      p.p2 {
      margin-left: 40px; 
      }
      p.p3 {
      margin-left: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft margin-left</h2>
    <p>Die Margin ist nicht definiert.</p>
    <p class="p1">Linke Margin ist auf 6em eingestellt.</p>
    <p class="p2">Linke Margin ist auf 40px eingestellt.</p>
    <p class="p3">Linke Margin ist auf 10% eingestellt.</p>
    <p>Die Margin ist nicht definiert</p>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
auto	Stellt die linke Margin ein. Das ist der Standardwert dieser Eigenschaft.
length	Definiert die linke Margin in px, pt, cm usw. Der Standardwert ist 0.
%	Stellt die linke Margin in % des enthaltenden Elements ein.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.