'-taggen og angi dens ' farge ' til svart:

>
= '../book.jpg' høyde = 'femti%' ; bredde = 'femti%' >

= 'bakgrunnsfarge: dodgerblue' >

= 'farge svart;' > Velkommen til Linuxhint >
>
>

Etter å ha kompilert koden ovenfor, ser utdataene slik ut:

---

---

«

”-taggen er nederst på nettsiden før du bruker en negativ margin.

Bruke negativ Margin Top Property

Legg til ' margin-topp ' eiendom til '

' element og gi verdien i negativ. For eksempel, her er -15 % verdien av margin-topp-eiendommen:

>
= '../book.jpg' høyde = 'femti%' ; bredde = 'femti%' >

= 'background-color:dodgerblue' >

= 'farge: svart; marg-topp: -15%;' > Velkommen til Linuxhint >
>
>

Etter å ha utført koden, ser nettsiden slik ut:

Utgangen viser at den negative margen-toppen gjør at «

»-elementet vises foran det overordnede elementet.

Bruke negativ margin-bunn-egenskap

Bruk de samme egenskapene som ovenfor og endre bare ' marg-bunn ' eiendom. Deretter legger du til et bilde nederst i «

»-elementet for å se visuelle endringer:

< div stil = 'background-color:dodgerblue' >
< h3 stil = 'farge: svart; marg-bunn: -5%;' > Velkommen til Linuxhint h3 >
div >
< img src = '../book.jpg' høyde = 'femti%' ; bredde = 'femti%' >

Etter oppdatering av koden ser nettsiden vår slik ut:

Utdataene ovenfor viser at teksten får bunnmarginen på -5%.

Bruke negativ Margin Right Property

Ved å gi -55 % verdien av margin-right-egenskapen til

-elementet, beveger det seg i motsatt retning:

< div stil = 'background-color:dodgerblue;' >
< h3 stil = 'farge: svart; marg-venstre: -55%; ' > Velkommen til Linuxhint < / h3 >
< / div >
< img src = '../book.jpg' høyde = 'femti%' ; bredde = 'femti%' >

Etter å ha utført kodeutgangen se slik ut:

Utdataene viser at teksten får den negative margen-høyre.

Bruke negativ margin venstre egenskap

Margin-venstre-egenskapen med negativ verdi fungerer på samme måte. I koden nedenfor flytter «

»-elementet 50 % til venstre side i motsatt retning av egenskapen margin-left:

= 'background-color:dodgerblue;' >

= 'farge: svart; marg-venstre: -50%;' > Velkommen til Linuxhint >
>
= '../book.jpg' høyde = 'femti%' ; bredde = 'femti%' >

Utgangen av koden ovenfor er:

Det er slik den negative marginen fungerer i CSS.

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

Når ' margin-bunn: 5 % ' brukes legger den til en marg fra undersiden mot midten av elementet, men når ' margin-topp: -5 % ' brukes det legger til en margin på 5% fra toppen, men i motsatt retning (utenfor siden).

Konklusjon

I CSS fungerer den negative marginen i motsatt retning ved å tildele marginverdien. Den flytter innholdet i elementet i retning utover/utenfor siden. 'margin-top:-5' er ikke lik 'margin-bottom:5' fordi begge egenskapsverdiene flytter innholdet i motsatte retninger som tilsvarer den overordnede posisjonen. Denne artikkelen har demonstrert hvordan den negative marginen fungerer.