Rand - CSS

Einen Rand in html erstellen mit CSS

Erklärung

Eigenschaft:

Margin
Alle Rände (oben, rechts, unten, links) können mit diesem einzelnen Tag kombiniert werden. Verwendung:
margin: 20px;
margin: 10px 20px 30px 10px;
margin: 10px 20px;
margin: 20px 10px 30px;

Definition:

Der Rand kann mit dem "margin" Tag eingestellt werden.
Es nimmt die folgenden Werte.
a)20px : Das wird einen Rand von 20px auf alle vier Seiten einstellen (oben, rechts, unten, links).
b)10px 20px 30px 10px: Dieses Format wird den Rand so einstellen: oben, rechts, unten, links.
c)10px 20px : Dieses Format wird den Rand für oben und rechts einstellen. Unten wird den Wert von oben kopiert (10px) und links wird der Wert von rechts kopiert(20px).
d)20px 10px 30px: Dieses Format wird den Rand für oben und rechts und unten einstellen. links wird den Wert von rechts genommen.
Die Werte können in Prozent, Punkte oder Pixel sein.

Beispiel 1:
<div align=right style="margin: 20px;">
Wir haben einen Rand von 20 Pixels eingestellt.
Sie können sehen dass dieser Abschnitt auf alle vier Seiten einen Rand hat.
</div>
Ergebnis:
Wir haben einen Rand von 20 Pixels eingestellt. Sie können sehen dass dieser Abschnitt auf alle vier Seiten einen Rand hat.

Beispiel 2:
<div style="margin: 10px 50px 30px 5px;">
Hier haben wir einen Rand mit vier Werten.
Sie können sehen, dass dieser Abschnitt einen Rand von 10px oben, 50px rechts, 30px unten and 5px links.
</div>
Ergebnis:
Hier haben wir einen Rand mit vier Werten. Sie können sehen, dass dieser Abschnitt einen Rand von 10px oben, 50px rechts, 30px unten and 5px links.

Beispiel 3:
<div style="margin: 20px 40px;">
Hier haben wir einen Rand mit zwei Werten.
Sie können sehen, dass dieser Abschnitt einen Rand von 10px oben und unten und 40px links und rechts.
</div>
Ergebnis:
Hier haben wir einen Rand mit zwei Werten. Sie können sehen, dass dieser Abschnitt einen Rand von 10px oben und unten und 40px links und rechts.

Beispiel 4:
<div style="margin: 10px 50px 40px;">
Hier haben wir einen Rand mit drei Werten.
Sie können sehen, dass dieser Abschnitt einen Rand von 10px oben, 50px rechts, 40px unten. links hat die Werte von rechts kopiert von 50px.
</div>
Ergebnis:
Hier haben wir einen Rand mit drei Werten. Sie können sehen, dass dieser Abschnitt einen Rand von 10px oben, 50px rechts, 40px unten. links hat die Werte von rechts kopiert von 50px.