CSS margin-left-Eigenschaft
Die CSS-Eigenschaft margin-left legt den linken Außenabstand eines Elements fest. Erfahren Sie mehr über die Werte und sehen Sie Beispiele.
Die Eigenschaft margin-left legt die Breite des linken Außenabstands fest.
Wenn die Summe aus width, margin-left, border, padding, dem Inhaltsbereich und margin-right die Containerbreite überschreitet, werden die Außenabstände auf auto gesetzt.
Die Eigenschaft margin-left wird als Schlüsselwort <auto>, <percentage> oder als <length> definiert. Der Wert kann negativ, positiv oder null sein.
Negative Werte sind erlaubt.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Der linke Außenabstand des Elements ist animierbar. |
| Version | CSS2 |
| DOM-Syntax | object.style.marginLeft = "20px"; |
Syntax
Syntax der CSS-Eigenschaft margin-left
margin-left: auto | <length> | <percentage> | initial | inherit;Beispiel der margin-left-Eigenschaft mit dem Wert "px":
Beispiel der CSS-Eigenschaft margin-left mit px-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.left {
margin-left: 25px;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Ergebnis
Beispiel der margin-left-Eigenschaft mit dem Wert "em":
Beispiel der CSS-Eigenschaft margin-left mit em-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.left {
margin-left: 8em;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Beispiel der margin-left-Eigenschaft mit den Werten "px", "em" und "%":
Beispiel der CSS-Eigenschaft margin-left mit em-, px- und %-Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.p1 {
margin-left: 6em;
}
p.p2 {
margin-left: 40px;
}
p.p3 {
margin-left: 10%;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>No specified margin.</p>
<p class="p1"> Left margin is set to 6em.</p>
<p class="p2">Left margin is set to 40px.</p>
<p class="p3">Left margin is set to 10%.</p>
<p>No specified margin</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| auto | Legt den linken Außenabstand fest. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| length | Definiert einen linken Außenabstand in px, pt, cm usw. Standardwert ist 0. | Ausprobieren » |
| % | Legt den linken Außenabstand in % des umgebenden Elements fest. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |