CSS-Margin-Eigenschaft
Die CSS-Eigenschaft margin wird verwendet, um Abstand um das Element herum zu erzeugen.
Die Eigenschaft margin ist eine Kurzform 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 obere Seite verwenden wir margin-top, für den unteren Rand margin-bottom, für die linke Seite margin-left und für die rechte Seite margin-right.
Die Eigenschaft margin kann mit einem, zwei, drei oder vier Werten definiert werden:
- margin : 25px 10px 15px 20px. Dieser Code bedeutet, dass der Rand oben 25px betragen muss, rechts 10px, unten 15px und links 20px.
- margin: 15px 10px 20px. Das bedeutet, dass der Rand oben 15px betragen muss, rechts und links 10px und unten 20px.
- margin: 15px 10px. Dieser Code bedeutet, dass obere und untere Ränder 15px betragen, rechte und linke Ränder 10px.
- Wenn
marginnur einen Wert hat, wird er auf alle vier Werte angewendet.
INFO
Negative Werte sind gültig.
| Initial Value | 0 |
|---|---|
| Applies to | Alle Elemente. |
| Inherited | No. |
| Animatable | Yes. Outline is animatable. |
| Version | CSS1 |
| DOM Syntax | Object.style.margin = "20px 10px"; |
Syntax
Syntax der CSS-Eigenschaft margin
margin: length | auto | initial | inherit;Beispiel für die Eigenschaft margin:
Beispiel der CSS-Eigenschaft margin mit vier Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Ergebnis
Beispiel für die Eigenschaft margin, wobei der Rand eines Elements für alle Seiten auf 10% gesetzt ist:
Beispiel der CSS-Eigenschaft margin mit %-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin: 10%;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Beispiel für die Eigenschaft margin, definiert als "em":
Beispiel der CSS-Eigenschaft margin mit em-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin: 4em;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Werfen wir einen Blick auf das folgende Beispiel, das den Unterschied zwischen den Eigenschaften margin, padding und border zeigt:
Beispiel für die Eigenschaft margin mit den Eigenschaften padding und border:
Beispiel der CSS-Eigenschaft margin mit einem (px)-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #eee;
width: 200px;
border: 20px solid #8ebf42;
padding: 30px;
margin: 55px;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>Werte
| Value | Description | Play it |
|---|---|---|
| auto | Setzt den Rand. Dies ist der Standardwert dieser Eigenschaft. | Play it » |
| length | Definiert einen Rand in px, pt, cm usw. Der Standardwert ist 0. | Play it » |
| % | Setzt den Rand in % des umschließenden Elements. | Play it » |
| initial | Veranlasst die Eigenschaft, ihren Standardwert zu verwenden. | Play it » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Practice
Which of the following statements are true about CSS Margins?