Was ist die Margin-Top-Eigenschaft in CSS?

Der ' Rand oben Die Eigenschaft hilft vielen Entwicklern bei der Erstellung responsiver Layouts und der Positionierung von HTML-Elementen. Die Verwendung der Eigenschaft „margin-top“ bietet mehr Kontrolle über HTML-Elemente, fügt eine visuelle Trennung hinzu und hilft bei der Erstellung besser ansprechender Designs. Dieser Leitfaden demonstriert die Eigenschaft „margin-top“ mit praktischer Implementierung in CSS.

Was ist die „Margin-Top“-Eigenschaft?
Verwenden Sie die Eigenschaft „margin-top“ mit einem positiven Wert
Verwenden Sie die Eigenschaft „margin-top“ mit einem negativen Wert

Was ist die „Margin-Top“-Eigenschaft?

Der ' Rand oben Die Eigenschaft „wird verwendet, um zusätzlichen Abstand zwischen HTML-Elementen zu schaffen. Es können sowohl positive als auch negative Werte eingestellt werden. Diese Werte werden entsprechend den Anforderungen des Designs festgelegt und helfen dabei, Überlappungen zu verhindern und den Abstand zwischen den HTML-Elementen anzupassen.

Wie nutzt man die „Margin-Top“-Eigenschaft mit einem positiven Wert?

Die Eigenschaft „margin-top“ mit einem positiven Wert fügt zusätzlichen Abstand von der oberen Position zur Mitte des ausgewählten HTML-Elements hinzu. Der bereitgestellte Wert kann in Pixeln, Prozent, Rem oder in globalen Werten wie Auto, Inherit, Unset usw. angegeben werden. Lassen Sie uns zum besseren Verständnis ein Beispiel durchgehen:

Beispiel: Nutzung positiver Werte

Nehmen wir eine HTML-Datei an, die ein „

”-Tag und stellt Dummy-Daten bereit. Weisen Sie als Nächstes das „ positiv „Wert für die Klasse des „div“-Elements:

< Körper >
< div Klasse = 'positiv' >
< P > Dem oberen Rand wird ein positiver Wert zugewiesen P >
div >
Körper >

Wenden Sie nach der Erstellung der HTML-Struktur CSS-Eigenschaften auf „ positiv ' Klasse:

< Stil >
.positiv {
Breite: 300px;
Höhe: 200px;
Hintergrundfarbe: waldgrün;
Schriftgröße: 20px;
Farbe: #F f f;
Rand oben: 50px;
}
Stil >

Im obigen Codeausschnitt:

Stellen Sie zunächst die Werte für „ 300px ' Und ' 200px „zum CSS“ Breite ' Und ' Höhe ” Eigenschaften bzw.
Als nächstes wird das „ Hintergrundfarbe “, „ Schriftgröße ', Und ' Farbe „CSS-Eigenschaften werden für bessere Visualisierungszwecke genutzt.
Am Ende wird der „50px“-Wert dem „ Rand oben ”-Eigenschaft, um zusätzlichen Platz hinzuzufügen.

Nach der Ausführung des obigen Codeausschnitts sieht die Webseite folgendermaßen aus:

Das obige GIF veranschaulicht die Auswirkung des Festlegens des Werts der Eigenschaft „margin-top“ auf der Webseite.

Wie verwende ich die Eigenschaft „margin-top“ mit einem negativen Wert?

Der ' Rand oben ”-Eigenschaft mit einem negativen Wert legt einen zusätzlichen Abstand von der oberen Position gegenüber der Mitte oder zur Außenseite der Seite relativ zum ausgewählten HTML-Element fest. Es wird hauptsächlich zum Erstellen überlappender Effekte oder zur Positionierung des HTML-Elements verwendet.

Lassen Sie uns zum besseren Verständnis ein Beispiel durchgehen.

Beispiel: Nutzung negativer Werte

Nehmen wir eine HTML-Datei an, die ein „

”-Tag und stellt Dummy-Daten bereit. Weisen Sie als Nächstes das „ Negativ „Wert für die Klasse des „div“-Elements:

< Stil >
.Negativ {
Farbe weiß;
Textausrichtung: Mitte;
Hintergrundfarbe: Rot ;
Rand oben: -30px ;
Polsterung: 30px;
Höhe: 100px;
}
Stil >
< Körper >
< div Klasse = 'Negativ' >
Der negative Wert wird zugewiesen für Margin-Top-Eigenschaft
div >
Körper >

Nachfolgend finden Sie die Beschreibung des oben genannten Codeausschnitts:

Zuerst die ' Negativ Die Klasse „“ wird innerhalb der „Klasse“ ausgewählt. ”-Tag, um CSS-Stil anzuwenden.
Als nächstes legen Sie die Werte von „ fest 220px ' Und ' Rot „zum CSS“ Breite ' Und ' Hintergrundfarbe ”-Eigenschaften zur Schaffung besserer Visualisierungsunterschiede.
Legen Sie dann den Wert „ -30px „zum CSS“ Rand oben ' Eigentum.
Erstellen Sie anschließend ein „
” Tag und weisen Sie ihm die Klasse „ zu Negativ “. Stellen Sie außerdem Dummy-Daten für das div-HTML-Element bereit.

Nach der Ausführung des obigen Codeausschnitts sieht die Webseite folgendermaßen aus:

Das obige GIF zeigt den Effekt, der sich auf das Design der Webseite auswirkt, wenn der negative Wert für die Eigenschaft „margin-top“ festgelegt wird.

Abschluss

Der ' Rand oben Die Eigenschaft „wird verwendet, um zusätzlichen Abstand zwischen HTML-Elementen zu schaffen. Es können sowohl positive als auch negative Werte eingestellt werden. Wenn der Eigenschaft „margin-top“ ein positiver Wert zugewiesen wird, wird der zusätzliche Platz zur Mitte der Webseite oder des ausgewählten HTML-Elements hin hinzugefügt. Bei einem „negativen“ Wert wird der Leerraum hinzugefügt, jedoch zur Außenseite der Seite hin. Dieser Artikel zeigt, was die Margin-Top-Eigenschaft in CSS ist.

Was ist die Margin-Top-Eigenschaft in CSS?