CSS-Margin
Die CSS-Eigenschaft margin wird verwendet, um Abstand um ein Element herum zu erzeugen. CSS stellt einzelne Eigenschaften bereit, um den Abstand für jede Seite eines Elements festzulegen (oben, rechts, unten und links).
Die einzelnen Seiten
Mit Hilfe der folgenden Eigenschaften können Sie den Abstand für jede Seite eines Elements festlegen:
Es ist bereits offensichtlich, dass wir für die obere Seite margin-top, für die untere margin-bottom, für die linke Seite margin-left und für die rechte Seite margin-right verwenden.
Alle Margin-Eigenschaften akzeptieren die folgenden Werte:
auto- der Abstand wird vom Browser berechnet,length- gibt einen Abstand inpx,pt,cmusw. an,%- gibt einen Abstand als Prozentsatz der Breite des Elternelements an,inherit- gibt an, dass der Abstand vom Elternelement geerbt werden muss.
Die margin-Eigenschaft akzeptiert negative Werte.
margin als Shorthand-Eigenschaft
Die CSS-Eigenschaft margin ist eine Shorthand-Eigenschaft für die folgenden einzelnen Margin-Eigenschaften:
Wenn die margin-Eigenschaft vier verschiedene Werte hat, sieht der Code wie folgt aus:
CSS different margins
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}Wenn alle Seiten denselben Wert haben, beispielsweise 50px, können wir dies in CSS wie folgt schreiben.
CSS the same margin, code
p {
margin: 50px;
}Wenn die oberen und unteren Seiten denselben Wert haben (z. B. 15px) und die linken und rechten Seiten denselben Wert haben (z. B. 10px), können Sie den folgenden Code verwenden.
CSS margin with 2 numbers, code
p {
margin: 15px 10px;
}Dies entspricht:
CSS margin with 2 numbers, long way, code
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}Wenn die linken und rechten Seiten gleich sind (z. B. 15px), die obere Seite 5px und die untere Seite 10px beträgt, können Sie Folgendes schreiben:
CSS margin with 3 numbers, code
p {
margin: 5px 15px 10px;
}Dies entspricht:
CSS margin with 3 numbers, long way, code
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Beispiel für die margin-Eigenschaft:
CSS margin property code
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Ergebnis
Der auto-Wert der margin-Eigenschaft
Sie können ein Element horizontal in seinem Container zentrieren, indem Sie die margin-Eigenschaft auf auto setzen. Dadurch nimmt das Element seine definierte Breite ein, und der verbleibende Raum wird gleichmäßig zwischen dem rechten und linken Rand aufgeteilt.
Beispiel für die margin-Eigenschaft mit dem „auto“-Wert:
Beispiel zur Verwendung des „auto“-Werts der margin-Eigenschaft:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<h2>The auto value</h2>
<p>
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
</p>
<div>
The auto value horizontally centered this div.
</div>
</body>
</html>Der inherit-Wert der margin-Eigenschaft
Im folgenden Beispiel wird der linke Rand des <p>-Elements von seinem Elternelement (<div>) geerbt:
Beispiel für die margin-Eigenschaft mit dem „inherit“-Wert:
Beispiel zur Verwendung des „inherit“-Werts der margin-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
margin-left: 100px;
}
p.inherit {
margin-left: inherit;
padding: 10px 0;
}
</style>
</head>
<body>
<h2>The inherit value</h2>
<p>
Here the left margin is inherited from its parent element:
</p>
<div>
<p class="inherit">
With the help of the "inherit" value, the left margin is inherited from the div element.
</p>
</div>
</body>
</html>Praxis
Welche Eigenschaften können Sie mit CSS-Margin festlegen?