CSS -Ränder
Ränder werden verwendet, um außerhalb definierter Grenzen einen Raum um Elemente herum zu schaffen.
CSS-Ränder
Die CSS margin-Eigenschaften werden verwendet, um außerhalb definierter Grenzen einen Raum um Elemente herum zu erstellen.
Mit CSS haben Sie die volle Kontrolle über die Ränder. Es gibt Eigenschaften zum Festlegen des Rands für jede Seite eines Elements (oben, rechts, unten und links).
Rand - Einzelne Seiten
CSS hat Eigenschaften, um den Rand für jede Seite eines Elements anzugeben:
margin-topmargin-rightmargin-bottommargin-left
Alle Randeigenschaften können die folgenden Werte haben:
- auto - der Browser berechnet die Marge
- Länge - gibt einen Rand in px, pt, cm usw. an.
- % - gibt einen Rand in % der Breite des umgebenden Elements an
- erben - gibt an, dass der Rand vom übergeordneten Element geerbt werden soll
Tipp: Negative Werte sind erlaubt.
Beispiel
Legen Sie unterschiedliche Ränder für alle vier Seiten eines <p>-Elements fest:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Rand - Kurzschrift-Eigenschaft
Um den Code zu verkürzen, ist es möglich, alle Randeigenschaften in einer Eigenschaft anzugeben.
Die marginEigenschaft ist eine abgekürzte Eigenschaft für die folgenden einzelnen Randeigenschaften:
margin-topmargin-rightmargin-bottommargin-left
Also, hier ist, wie es funktioniert:
Wenn die marginEigenschaft vier Werte hat:
- Rand: 25px 50px 75px 100px;
- Der obere Rand beträgt 25 Pixel
- der rechte Rand ist 50px
- Der untere Rand beträgt 75 Pixel
- linker Rand ist 100px
Beispiel
Verwenden Sie die Margin-Kurzschrifteigenschaft mit vier Werten:
p {
margin: 25px 50px 75px 100px;
}
Wenn die marginEigenschaft drei Werte hat:
- Rand: 25px 50px 75px;
- Der obere Rand beträgt 25 Pixel
- rechter und linker Rand sind 50px
- Der untere Rand beträgt 75 Pixel
Beispiel
Verwenden Sie die Margin-Kurzschrifteigenschaft mit drei Werten:
p {
margin: 25px 50px 75px;
}
Wenn die marginEigenschaft zwei Werte hat:
- Rand: 25px 50px;
- Der obere und untere Rand beträgt 25 Pixel
- rechter und linker Rand sind 50px
Beispiel
Verwenden Sie die Rand-Kurzschrifteigenschaft mit zwei Werten:
p {
margin: 25px 50px;
}
Wenn die marginEigenschaft einen Wert hat:
- Rand: 25px;
- Alle vier Ränder sind 25 Pixel groß
Beispiel
Verwenden Sie die Margin-Kurzschrifteigenschaft mit einem Wert:
p {
margin: 25px;
}
Der Auto-Wert
Sie können die Eigenschaft margin so einstellen auto, dass das Element innerhalb seines Containers horizontal zentriert wird.
Das Element nimmt dann die angegebene Breite ein und der verbleibende Platz wird gleichmäßig auf den linken und rechten Rand aufgeteilt.
Beispiel
Rand verwenden: auto:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Der Erbwert
In diesem Beispiel wird der linke Rand des Elements <p class="ex1"> vom übergeordneten Element (<div>) geerbt:
Beispiel
Verwendung des Erbwerts:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}