' tag og sæt dets ' farve ' til sort:

>
= '../book.jpg' højde = 'halvtreds%' ; bredde = 'halvtreds%' >

= 'baggrundsfarve: dodgerblue' >

= 'farve: sort;' > Velkommen til Linuxhint >
>
>

Efter kompilering af ovenstående kode ser outputtet sådan ud:

---

---

Det '

” tag er nederst på websiden, før der anvendes en negativ margen.

Brug af negativ margin Top-egenskab

Tilføje ' margin-top ' ejendom til '

” element og angiv dets værdi i negativ. For eksempel er -15 % værdien af ​​margin-top-ejendommen:

>
= '../book.jpg' højde = 'halvtreds%' ; bredde = 'halvtreds%' >

= 'baggrundsfarve:dodgerblue' >

= 'farve: sort; margin-top: -15%;' > Velkommen til Linuxhint >
>
>

Efter at have udført koden, ser websiden sådan ud:

Outputtet viser, at den negative margin-top får '

'-elementet til at vises foran det overordnede element.

Brug af negativ margin bundegenskab

Anvend de samme egenskaber som ovenfor og skift blot ' margin-bund ” ejendom. Tilføj derefter et billede i bunden af ​​'

'-elementet for at se visuelle ændringer:

< div stil = 'baggrundsfarve:dodgerblue' >
< h3 stil = 'farve: sort; margin-bund: -5%;' > Velkommen til Linuxhint h3 >
div >
< img src = '../book.jpg' højde = 'halvtreds%' ; bredde = 'halvtreds%' >

Efter opdatering af koden ser vores webside sådan ud:

Ovenstående output viser, at teksten får bundmargenen på -5%.

Brug af negativ Margin Right-egenskab

Ved at give -55 % værdi af margin-right-egenskaben til

-elementet, bevæger det sig i den modsatte retning:

< div stil = 'baggrundsfarve:dodgerblue;' >
< h3 stil = 'farve: sort; margin-venstre: -55%; ' > Velkommen til Linuxhint < / h3 >
< / div >
< img src = '../book.jpg' højde = 'halvtreds%' ; bredde = 'halvtreds%' >

Efter udførelse af kodeoutput se sådan ud:

Outputtet viser, at teksten får den negative margin-ret.

Brug af negativ margin venstre egenskab

Egenskaben margin-venstre med en negativ værdi fungerer på samme måde. I nedenstående kode flytter '

'-elementet 50 % til venstre side i den modsatte retning af egenskaben margin-left:

= 'baggrundsfarve:dodgerblue;' >

= 'farve: sort; margin-venstre: -50%;' > Velkommen til Linuxhint >
>
= '../book.jpg' højde = 'halvtreds%' ; bredde = 'halvtreds%' >

Outputtet af ovenstående kode er:

Det er sådan den negative margin fungerer i CSS.

Hvorfor er margin-top:-5 != margin-bottom:5?

Når ' margin-bund: 5 % ' bruges, tilføjer den en margen fra bunden mod midten af ​​elementet, men når ' margin-top: -5 % ” bruges, tilføjer den en margin på 5 % fra toppen, men i den modsatte retning (uden for siden).

Konklusion

I CSS virker den negative margin i den modsatte retning ved at tildele marginværdien. Det flytter indholdet af elementet i udadgående retning/uden for siden. 'margin-top:-5' er ikke lig med 'margin-bottom:5', fordi begge egenskabsværdier flytter indholdet i modsatte retninger svarende til den overordnede position. Denne artikel har med succes demonstreret, hvordan den negative margin fungerer.