' tag en stel de ' kleur ” naar zwart:

>
= '../boek.jpg' hoogte = 'vijftig%' ; breedte = 'vijftig%' >
= 'achtergrondkleur: dodgerblue' >

= 'de kleur zwart;' > Welkom bij Linuxhint >
>
>

Na het compileren van de bovenstaande code ziet de uitvoer er als volgt uit:

---

---

De '

”-tag staat onderaan de webpagina voordat een negatieve marge wordt toegepast.

Topeigenschap met negatieve marge gebruiken

Toevoegen ' marge-top ” eigendom aan de “

” element en geef de waarde negatief. Hier is bijvoorbeeld -15% de waarde van de eigenschap margin-top:

>
= '../boek.jpg' hoogte = 'vijftig%' ; breedte = 'vijftig%' >
= 'achtergrondkleur: dodgerblue' >

= 'kleur: zwart; marge-top: -15%;' > Welkom bij Linuxhint >
>
>

Na het uitvoeren van de code ziet de webpagina er als volgt uit:

De uitvoer geeft aan dat de negatieve margin-top ervoor zorgt dat het '

'-element vóór het bovenliggende element wordt weergegeven.

Negatieve marge bodemeigenschap gebruiken

Pas dezelfde eigenschappen toe als hierboven en verander gewoon de ' marge-bodem ' eigendom. Voeg daarna een afbeelding toe onderaan het '

'-element om visuele wijzigingen te zien:

< div stijl = 'achtergrondkleur: dodgerblue' >
< h3 stijl = 'kleur: zwart; marge-onderkant: -5%;' > Welkom bij Linuxhint h3 >
div >
< img src = '../boek.jpg' hoogte = 'vijftig%' ; breedte = 'vijftig%' >

Na het updaten van de code ziet onze webpagina er als volgt uit:

De bovenstaande uitvoer laat zien dat de tekst de ondermarge van -5% krijgt.

Rechtseigenschap met negatieve marge gebruiken

Door -55% waarde van margin-right eigenschap aan

element te geven, beweegt het in de tegenovergestelde richting:

< div stijl = 'achtergrondkleur: dodgerblue;' >
< h3 stijl = 'kleur: zwart; marge-links: -55%; ' > Welkom bij Linuxhint < / h3 >
< / div >
< img src = '../boek.jpg' hoogte = 'vijftig%' ; breedte = 'vijftig%' >

Na het uitvoeren van de code-uitvoer ziet het er als volgt uit:

De uitvoer laat zien dat de tekst de negatieve kantlijn goed krijgt.

Eigenschap Negatieve marge links gebruiken

De margin-left eigenschap met een negatieve waarde werkt op dezelfde manier. In de onderstaande code verplaatst het element '

' 50% naar de linkerkant in de tegenovergestelde richting van de eigenschap margin-left:

= 'achtergrondkleur: dodgerblue;' >

= 'kleur: zwart; marge-links: -50%;' > Welkom bij Linuxhint >
>
= '../boek.jpg' hoogte = 'vijftig%' ; breedte = 'vijftig%' >

De uitvoer van bovenstaande code is:

Zo werkt de negatieve marge in CSS.

Waarom is margin-top:-5 != margin-bottom:5?

Wanneer de ' marge-bodem:5% ' wordt gebruikt, voegt het een marge toe vanaf de onderkant naar het midden van het element, maar wanneer ' marge-top:-5% ” wordt gebruikt voegt het een marge toe van 5% vanaf de bovenkant maar in de tegenovergestelde richting (buiten de pagina).

Conclusie

In CSS werkt de negatieve marge in de tegenovergestelde richting door de margewaarde toe te wijzen. Het verplaatst de inhoud van het element in de buitenwaartse richting/buiten de pagina. De 'margin-top:-5' is niet gelijk aan 'margin-bottom:5' omdat beide eigenschapswaarden de inhoud in tegengestelde richtingen verplaatsen die overeenkomen met de bovenliggende positie. Dit artikel heeft met succes aangetoond hoe de negatieve marge werkt.