Margin -Eigenschaft in CSS erklärt

Ränder sind die Räume, die (für eine bessere Ästhetik) in jedem Element erstellt werden (. Der Rand wird automatisch durch den verwendeten Browser eingestellt. Die benutzerdefinierten Margen können jedoch mit der CSS-Margin-Eigenschaft erstellt werden. Die Ränder haben vier Seiten (normalerweise hängt es vom Element ab) und der Rand jeder Seite kann unter Verwendung der Randeigenschaft eingestellt werden.

Mit der Margin-Property können die Ränder einzeln auf die Seiten einstellen oder für mehrere Seiten gleichzeitig Ränder erzeugen. In diesem beschreibenden Leitfaden wird die Margin -Eigenschaft in CSS erläutert und enthält die folgenden Lernergebnisse.

• Arbeiten der Margin -Eigenschaft in CSS
• Arbeiten der Marge -Kurzform -Eigenschaft
• Verwendung von Margin -Eigenschaften mit Beispielen

Wie die Margeneigenschaft in CSS funktioniert

Die Margin -Eigenschaft in CSS kann unter verschiedenen Umständen arbeiten, unter denen Sie entweder (einzeln) Ränder an den Seiten geben müssen oder mit der Kurzeigenschaft (mehrere Seiten gleichzeitig) Ränder geben müssen. Die Arbeit in beiden Situationen wird hier diskutiert.

Der Rand kann an einzelne Seiten gegeben werden, indem die Syntax entsprechend verwendet wird.

Selector Margin-top: value; // auf der oberen Seite
Selector Margin-Bottom: Value; // auf der unteren Seite
Selector Margin-Links: Wert; // auf der linken Seite
Selector Margin-Right: Value; // auf der rechten Seite

Der Selektor kann jedes Element sein, während der Wert die Zahl ist, mit der eine bestimmte Margengrenze erfolgt. Der Wert kann mit mehreren Messeinheiten verwendet werden i.e., Auto, Länge (PX, CM, PT), Prozentsatz (%) und Erben (gemäß der Elternklasse). Das PX ist die absolute Messung, während EM, REM und Prozentsatz die relativen Maßnahmen sind und besser (im Vergleich zu PX) für reaktionsschnelle Ergebnisse geeignet sind.

Abgesehen von den Rändern dieser einzelnen Seite kann die Marge Shorthand -Eigenschaft auch verwendet werden. Die Syntax der Marge Shorthand -Eigenschaft ist unten bereitgestellt:

Selector Margin: Value1 Value2 Value3 Value;

Der Wert 1, Wert2, Wert3 und Wert4 repräsentieren die obere, rechte, unten und linke Seite eines Elements.

So verwenden Sie die Margeneigenschaft in CSS

Dieser Abschnitt enthält einige Beispiele, die die Verwendung von Margin -Eigenschaften in CSS zeigen.

Beispiel 1: Rand an einzelnen Seiten geben
In diesem Beispiel wird der unten geschriebene Code verwendet, um einzelne Seiten Ränder zu geben.

Margin -Eigenschaft in CSS

Mit Rand rechts von 5px
Verwenden von Rand unten von 5px
Verwenden der Margin -Oberseite von 5px
mit Rand links von 5px unter Verwendung

Die Beschreibung des Code ist unten bereitgestellt

• Ein CSS -Styling für Divs wird definiert, indem Breite, Schwimmereigenschaften und Grenze geben
• Vier CSS -Klassen werden mit dem Namen "Top", "Rig", "Bot" und "LEF" erstellt, die den Rand (5px) in jeder Klasse enthält
• Diese vier Klassen werden in den Divisionen (Divs) verwendet

Das Bild des Code ist unten angezeigt

Ausgang:

Beispiel 2: gleichzeitig an mehreren Seiten Ränder geben
Das obige Beispiel stellte die Ränder den einzelnen Seiten zur Verfügung. Der folgende Code gibt gleichzeitig mehrere Seiten für mehrere Seiten

Margin -Eigenschaft in CSS

Verwenden Sie auf allen Seiten eine Marge von 5%
Verwenden Sie 5% Marge oben/unten und 10% links/rechts
Verwenden Sie den Rand von 2 und 3em nach oben und unten und 4EM nach rechts/links
unter Verwendung von Rand von 2,4,6,8 Pixel oben, rechts, unten, links

Der obige Code wird als beschrieben als

• Vier CSS -Klassen werden "Sing", "Doub", "Trip" und "All" erstellt, "Sing", "Doub", "Trip" und "All"
• Die „Sin“ -Klasse gibt für alle Seiten eine Marge von% und die „Doub“ -Klasse bietet eine Marge von 5% bis oben/unten und 10% nach rechts/links
• Die „Trip“ -Klasse bietet einen Rand von 2EM und 4EM auf der Oberseite und 3em nach rechts/links
• Die "All" -Klasse bietet Rand von 2, 4, 6 und 8px nach oben, rechts, unten und linke Seiten

Das Bild des Code ist unten angezeigt

Ausgang:

Aus den obigen Beispielen hätten Sie die Anwendbarkeit der Margin -Eigenschaft in folgenden Kontexten gelernt:

• Anwendung der Margenbekämpfung auf alle Seiten einzeln
• Ränder mit der Marge Shorthand -Immobilie geben

Abschluss

Die Margin-Eigenschaft in CSS wird praktiziert, um Margen nach benutzerdefinierten Eigenschaften zu geben. Dieser Artikel zeigt die Arbeit und Verwendung von Margin -Eigenschaften in CSS. Die Margin -Eigenschaft in CSS kann verwendet werden, um jeder Seite einzeln Ränder zu verleihen, und die Marge Shorthand -Eigenschaft kann verwendet werden, um mehrere Seiten gleichzeitig Ränder zu verleihen.