Die CSS-Eigenschaft margin erstellt einen Raum um das Element herum.
Die Eigenschaft margin ist eine Abkürzung für die folgenden Eigenschaften:
Wir können die Eigenschaft margin für alle Seiten (oben, unten, links, rechts) auf einmal verwenden. Für die Oberseite verwenden wir margin-top, für die Unterseite - margin-bottom, für linke Seite - margin-left und für die rechte Seite - margin-right.
Die Eigenschaft margin kann mit einem, zwei, drei oder vier Werten angegeben werden:
- margin : 25px 10px 15px 20px. This code means that the margin in the top side must be 25px, in the right side margin 10px, in the bottom side 15px and the left side is 20px.
- margin: 15px 10px 20px. Dieser Code bedeutet, dass die Margin in der Oberseite 25px, in der rechten Seiten 10px, in der Unterseite 15px und auf der linken Seite 20px betragen muss.
- margin: 15px 10px. Das bedeutet, dass die Margin in der Oberseite 15px, in der rechten und linken Seite 10px und in der Unterseite 20px betragen muss.
- Wenn die Margin nur einen Wert hat, wird sie auf alle vier Werte angewendet.
Negative Werte sind gültig.
| Anfangswert | 0 |
| Gilt für | Alle Elemente |
| Geerbt | Nein |
| Animierbar | Ja, der Umriss ist animierbar. |
| Version | CSS1 |
| DOM Syntax | Object.style.margin = "20px 10px"; |
Syntax
margin: length | auto | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft margin</h2>
<p>Ein Absatz mit den Eigenschaften background-color, color und margin.</p>
</body>
</html>Hier ist die Margin des Elements auf 10% für alle Seiten eingestellt:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
p.example {
margin: 10%;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft margin</h2>
<p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
<p class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
<p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
</body>
</html>Ein anderes Beispiel, wo die Margin des Elements durch "em" definiert ist:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
p.example {
margin: 4em;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft margin</h2>
<p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
<p class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
<p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
</body>
</html>Ein weiteres Beispiel, wo die Unterschiede zwischen den Eigenschaften margin, padding und border angezeigt sind:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
background-color: #eee;
width: 200px;
border: 20px solid #8ebf42;
padding: 30px;
margin: 55px;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft margin</h2>
<div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| auto | Stellt die Margin ein. Es ist der Standardwert dieser Eigenschaft. |
| length | Definiert die Margin in px, pt, cm usw. Der Standardwert ist 0. |
| % | Stellt die 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+ |
Übe dein Wissen
Was ist die Funktion der CSS-Eigenschaft 'Margin'?
Richtig!
Falsch!