' žymą ir nustatykite jos ' spalva “ į juodą:

>
= '../book.jpg' aukščio = 'penkiasdešimt%' ; plotis = 'penkiasdešimt%' >

= 'fono spalva: mėlyna' >

= 'spalva: juoda'; > Sveiki atvykę į Linuxhint >
>
>

Sukūrus aukščiau pateiktą kodą, išvestis atrodo taip:

---

---

„

“ žyma yra tinklalapio apačioje prieš taikant neigiamą paraštę.

Neigiamos maržos viršutinės nuosavybės naudojimas

Papildyti ' paraštė-viršus ' nuosavybė '

“ elementą ir nurodykite jo vertę neigiamu. Pavyzdžiui, čia -15% yra viršutinės maržos nuosavybės vertė:

>
= '../book.jpg' aukščio = 'penkiasdešimt%' ; plotis = 'penkiasdešimt%' >

= 'fono spalva: mėlyna' >

= 'spalva: juoda; paraštė viršuje: -15%;' > Sveiki atvykę į Linuxhint >
>
>

Įvykdžius kodą, tinklalapis atrodo taip:

Išvestis rodo, kad neigiamas paraštės viršuje elementas „

“ rodomas prieš pagrindinį elementą.

Neigiamos maržos apatinės nuosavybės naudojimas

Taikykite tas pačias savybes, kaip nurodyta aukščiau, ir tiesiog pakeiskite „ paraštė-apačia ' nuosavybė. Po to elemento „

“ apačioje pridėkite vaizdą, kad pamatytumėte vaizdinius pakeitimus:

< div stilius = 'fono spalva: mėlyna' >
< h3 stilius = 'spalva: juoda; paraštė-apačia: -5%;' > Sveiki atvykę į Linuxhint h3 >
div >
< img src = '../book.jpg' aukščio = 'penkiasdešimt%' ; plotis = 'penkiasdešimt%' >

Atnaujinus kodą mūsų tinklalapis atrodo taip:

Aukščiau pateikta produkcija rodo, kad teksto apatinė paraštė yra -5%.

Neigiamos maržos tinkamos nuosavybės naudojimas

Elementui

suteikus -55% margin-right nuosavybės vertės, jis juda priešinga kryptimi:

< div stilius = 'fono spalva: mėlyna;' >
< h3 stilius = 'spalva: juoda; paraštė kairėje: -55%; ' > Sveiki atvykę į Linuxhint < / h3 >
< / div >
< img src = '../book.jpg' aukščio = 'penkiasdešimt%' ; plotis = 'penkiasdešimt%' >

Įvykdžius kodą, išvestis atrodo taip:

Išvestis rodo, kad tekstas gauna neigiamą paraštę dešinėje.

Neigiamos paraštės kairiosios nuosavybės naudojimas

Taip pat veikia ir kairiosios maržos ypatybė, turinti neigiamą vertę. Žemiau pateiktame kode elementas „

“ pasislenka 50 % į kairę pusę priešinga kryptimi nei ypatybė margin-left:

= 'fono spalva: mėlyna;' >

= 'spalva: juoda; paraštė kairėje: -50%;' > Sveiki atvykę į Linuxhint >
>
= '../book.jpg' aukščio = 'penkiasdešimt%' ; plotis = 'penkiasdešimt%' >

Aukščiau pateikto kodo išvestis yra:

Taip CSS veikia neigiama marža.

Kodėl margin-top:-5 != margin-bottom:5?

Kai ' paraštė-apačia: 5 % “ naudojamas, jis prideda paraštę nuo apačios link elemento centro, bet kai „ viršutinė paraštė: -5 % “, tai prideda 5 % paraštę nuo viršaus, bet priešinga kryptimi (puslapio išorėje).

Išvada

CSS sistemoje neigiama paraštė veikia priešinga kryptimi, priskirdama paraštės reikšmę. Jis perkelia elemento turinį į išorę / puslapio išorę. „Margin-top:-5“ nėra lygus „margin-bottom:5“, nes abi ypatybių reikšmės perkelia turinį priešingomis kryptimis, atitinkančiomis pirminę padėtį. Šis straipsnis sėkmingai parodė, kaip veikia neigiama marža.