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>

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>

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>

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.

Browser-Support

1.0+ 1.0+ 1.0+ 3.5+


Finden Sie das nützlich?

Ähnliche Artikel