So verwenden Sie den Rand in CSS

Das Randattribut in CSS wird verwendet, um den leeren Bereich um das Element herum zu steuern, einschließlich der vier Richtungen: Rand: []].

Verwendung der Margin-Eigenschaft in CSS: Die Margin-Eigenschaft wird verwendet, um den leeren Bereich um ein Element herum zu steuern. Sie kann den externen Abstand eines Elements relativ zu seinem übergeordneten Element festlegen.

Syntax

<code>margin: <length | auto> [<length | auto> [<length | auto> [<length | auto>]]]</code>

Parameter

:
• Der in Einheiten wie Pixel (px), Zentimeter (cm), Zoll (in) usw. angegebene Größenwert.
:
• Rand automatisch entsprechend dem Standardwert des Browsers festlegen.
Vier Randwerte

Das Randattribut kann vier separate Werte angeben, um den Leerraum in verschiedenen Richtungen um das Element herum zu steuern:

margin-top:
1. Steuert den Leerraum über dem Element.
margin-right:
2. Kontrollieren Sie den Leerraum auf der rechten Seite des Elements.
margin-bottom:
3. Kontrollieren Sie den Leerraum unter dem Element.
margin-left:
4. Kontrollieren Sie den Leerraum auf der linken Seite des Elements.
Einen einzelnen Randwert festlegen

Um nur einen einzelnen Randwert festzulegen, können Sie einen Parameter angeben. Zum Beispiel:

<code>margin: 20px;</code>

Dadurch werden 20 Pixel Leerraum um das Element herum hinzugefügt.

Mehrere Randwerte festlegen

Um mehrere Randwerte festzulegen, können Sie mehrere Parameter angeben. Zum Beispiel:

<code>margin: 10px 20px 30px 40px;</code>

dis würde für das Element angeben:

Top: 10px

• right: 20px
• bottom: 30px
• left: 40px
• use das automatische Keyword

Das Auto -Keyword weist den Browser auf Margin-Wert automatisch berechnen. Dies ist in bestimmten Situationen nützlich, zum Beispiel:

<code>margin: auto;</code>

Dadurch wird das Element horizontal innerhalb des übergeordneten Elements zentriert.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Rand in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!