' taggen och ställ in dess ' Färg ' till svart:

>
= '../bok.jpg' höjd = 'femtio%' ; bredd = 'femtio%' >

= 'bakgrundsfärg: dodgerblue' >

= 'svart färg;' > Välkommen till Linuxhint >
>
>

Efter att ha kompilerat ovanstående kod ser utdata ut så här:

---

---

den '

”-taggen finns längst ned på webbsidan innan en negativ marginal tillämpas.

Använda negativ marginal toppegenskap

Lägg till ' marginal-top ' egendom till '

” element och ange dess värde i negativt. Här är till exempel -15 % värdet på egenskapen med marginaltopp:

>
= '../bok.jpg' höjd = 'femtio%' ; bredd = 'femtio%' >

= 'background-color:dodgerblue' >

= 'färg: svart; marginal-top: -15%;' > Välkommen till Linuxhint >
>
>

Efter att ha kört koden ser webbsidan ut så här:

Utdatan visar att den negativa marginalen-top gör att '

'-elementet visas framför det överordnade elementet.

Använda negativ marginal bottenegenskap

Använd samma egenskaper som ovan och ändra bara ' marginal-botten ' fast egendom. Lägg sedan till en bild längst ned i '

'-elementet för att se visuella ändringar:

< div stil = 'background-color:dodgerblue' >
< h3 stil = 'färg: svart; marginal-botten: -5%;' > Välkommen till Linuxhint h3 >
div >
< img src = '../bok.jpg' höjd = 'femtio%' ; bredd = 'femtio%' >

Efter uppdatering av koden ser vår webbsida ut så här:

Ovanstående utdata visar att texten får bottenmarginalen på -5%.

Använda negativ marginalrättsegenskap

Genom att ge -55 % värdet av margin-right-egenskapen till

-elementet rör sig det i motsatt riktning:

< div stil = 'background-color:dodgerblue;' >
< h3 stil = 'färg: svart; marginal-vänster: -55%; ' > Välkommen till Linuxhint < / h3 >
< / div >
< img src = '../bok.jpg' höjd = 'femtio%' ; bredd = 'femtio%' >

Efter att ha kört kodutmatningen ser ut så här:

Utdata visar att texten får negativ marginal-rätt.

Använda negativ marginal vänster egenskap

Egenskapen Margin-left som har ett negativt värde fungerar på samma sätt. I koden nedan flyttas '

'-elementet 50 % till vänster sida i motsatt riktning till egenskapen margin-left:

= 'background-color:dodgerblue;' >

= 'färg: svart; marginal-vänster: -50%;' > Välkommen till Linuxhint >
>
= '../bok.jpg' höjd = 'femtio%' ; bredd = 'femtio%' >

Utdata från ovanstående kod är:

Det är så den negativa marginalen fungerar i CSS.

Varför är margin-top:-5 != margin-bottom:5?

När ' marginal-botten: 5 % ' används lägger den till en marginal från undersidan mot mitten av elementet men när ' marginal-topp: -5 % ” används den lägger till en marginal på 5 % från toppen men i motsatt riktning (utanför sidan).

Slutsats

I CSS fungerar den negativa marginalen i motsatt riktning genom att tilldela marginalvärdet. Det flyttar innehållet i elementet i riktning utåt/utanför sidan. 'Margin-top:-5' är inte lika med 'margin-bottom:5' eftersom båda egenskapsvärdena flyttar innehållet i motsatta riktningar som motsvarar den överordnade positionen. Den här artikeln har framgångsrikt visat hur den negativa marginalen fungerar.