” Tag und legen Sie sein „ fest Farbe ' schwärzen:

>
= '../book.jpg' Höhe = 'fünfzig%' ; Breite = 'fünfzig%' >
= „Hintergrundfarbe: Dodgerblue“ >
= 'Farbe: Schwarz;' > Willkommen bei Linuxhint >
>
>

Nach dem Kompilieren des obigen Codes sieht die Ausgabe so aus:

---

---

Der '

Das Tag „“ befindet sich unten auf der Webseite, bevor ein negativer Rand angewendet wird.

Verwendung der Eigenschaft „Negativer Rand oben“.

Hinzufügen ' Rand oben ” Eigentum an die „

”-Element und geben Sie seinen Wert negativ an. Hier ist beispielsweise -15 % der Wert der Margin-Top-Eigenschaft:

>
= '../book.jpg' Höhe = 'fünfzig%' ; Breite = 'fünfzig%' >
= „Hintergrundfarbe:Dodgerblue“ >
= „Farbe: Schwarz; Rand oben: -15 %;“ > Willkommen bei Linuxhint >
>
>

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

Die Ausgabe zeigt, dass der negative Rand oben dafür sorgt, dass das „

“-Element vor dem übergeordneten Element angezeigt wird.

Verwenden der Eigenschaft „Negativer Rand unten“.

Wenden Sie die gleichen Eigenschaften wie oben an und ändern Sie einfach das „ Rand unten ' Eigentum. Fügen Sie anschließend unten im Element „

“ ein Bild hinzu, um visuelle Änderungen anzuzeigen:

< div Stil = „Hintergrundfarbe:Dodgerblue“ >
< h3 Stil = „Farbe: Schwarz; Rand unten: -5 %;“ > Willkommen bei Linuxhint h3 >
div >
< Bild src = '../book.jpg' Höhe = 'fünfzig%' ; Breite = 'fünfzig%' >

Nach der Aktualisierung des Codes sieht unsere Webseite folgendermaßen aus:

Die obige Ausgabe zeigt, dass der Text den unteren Rand von -5 % erhält.

Verwendung der Eigenschaft „Negativer Randrecht“.

Indem dem Element

ein Wert von -55 % der Eigenschaft „margin-right“ zugewiesen wird, bewegt es sich in die entgegengesetzte Richtung:

< div Stil = „Hintergrundfarbe:Dodgerblue;“ >
< h3 Stil = 'Farbe: Schwarz; Rand links: -55 %; ' > Willkommen bei Linuxhint < / h3 >
< / div >
< Bild src = '../book.jpg' Höhe = 'fünfzig%' ; Breite = 'fünfzig%' >

Nach der Ausführung des Codes sieht die Ausgabe so aus:

Die Ausgabe zeigt, dass der Text den negativen Rand rechts erhält.

Verwendung der Eigenschaft „Negativer linker Rand“.

Die margin-left-Eigenschaft mit einem negativen Wert funktioniert auf die gleiche Weise. Im folgenden Code verschiebt sich das „

“-Element um 50 % nach links in die entgegengesetzte Richtung zur margin-left-Eigenschaft:

= „Hintergrundfarbe:Dodgerblue;“ >
= „Farbe: Schwarz; Rand links: -50 %;“ > Willkommen bei Linuxhint >
>
= '../book.jpg' Höhe = 'fünfzig%' ; Breite = 'fünfzig%' >

Die Ausgabe des obigen Codes ist:

So funktioniert die negative Marge in CSS.

Warum ist margin-top:-5 != margin-bottom:5?

Wenn das ' Marge unten: 5 % ” wird verwendet, es fügt einen Rand von der Unterseite zur Mitte des Elements hinzu, aber wenn „ Marge-oben: -5 % ” wird ein Rand von 5 % vom oberen Rand hinzugefügt, jedoch in die entgegengesetzte Richtung (außerhalb der Seite).

Abschluss

In CSS funktioniert der negative Rand in die entgegengesetzte Richtung, indem er den Randwert zuweist. Es verschiebt den Inhalt des Elements nach außen/außerhalb der Seite. „margin-top:-5“ ist nicht gleich „margin-bottom:5“, da beide Eigenschaftswerte den Inhalt entsprechend der übergeordneten Position in entgegengesetzte Richtungen verschieben. In diesem Artikel wurde erfolgreich demonstriert, wie die negative Marge funktioniert.