' in nastavite ' barva ” v črno:

>
= '../book.jpg' višina = 'petdeset%' ; premer = 'petdeset%' >

= 'barva ozadja: dodgerblue' >

= 'barva: črna;' > Dobrodošli v Linuxhint >
>
>

Po prevajanju zgornje kode je rezultat videti takole:

---

---

'

” je na dnu spletne strani pred uporabo negativne marže.

Uporaba Negative Margin Top Property

Dodaj ' margin-top » lastnina »

” in navedite negativno vrednost. Na primer, tukaj je -15 % vrednost lastnosti margin-top:

>
= '../book.jpg' višina = 'petdeset%' ; premer = 'petdeset%' >

= 'barva-ozadje:dodgerblue' >

= 'barva: črna; zgornji rob: -15%;' > Dobrodošli v Linuxhint >
>
>

Po izvedbi kode je spletna stran videti takole:

Izhod prikaže, da negativni zgornji rob povzroči, da se element “

” prikaže pred nadrejenim elementom.

Uporaba lastnosti dna negativnega roba

Uporabite iste lastnosti kot zgoraj in samo spremenite » margin-bottom ” lastnina. Po tem dodajte sliko na dno elementa “

”, da vidite vizualne spremembe:

< div stil = 'barva-ozadje:dodgerblue' >
< h3 stil = 'barva: črna; rob-spodnji: -5%;' > Dobrodošli v Linuxhintu h3 >
div >
< img src = '../book.jpg' višina = 'petdeset%' ; premer = 'petdeset%' >

Po posodobitvi kode je naša spletna stran videti takole:

Zgornji rezultat kaže, da besedilo dobi spodnji rob -5 %.

Uporaba lastnosti pravice do negativne marže

Če elementu

dodelite -55-odstotno vrednost lastnosti margin-right, se premika v nasprotno smer:

< div stil = 'barva-ozadje:dodgerblue;' >
< h3 stil = 'barva: črna; levi rob: -55%; ' > Dobrodošli v Linuxhintu < / h3 >
< / div >
< img src = '../book.jpg' višina = 'petdeset%' ; premer = 'petdeset%' >

Po izvedbi je izhod kode videti takole:

Izhod pokaže, da besedilo dobi negativni desni rob.

Uporaba lastnosti Negative Margin Left

Lastnost margin-left z negativno vrednostjo deluje na enak način. V spodnji kodi se element “

” premakne za 50 % na levo stran v nasprotni smeri od lastnosti margin-left:

= 'barva-ozadje:dodgerblue;' >

= 'barva: črna; rob-levo: -50%;' > Dobrodošli v Linuxhint >
>
= '../book.jpg' višina = 'petdeset%' ; premer = 'petdeset%' >

Rezultat zgornje kode je:

Tako deluje negativna marža v CSS.

Zakaj je margin-top:-5 != margin-bottom:5?

Ko ' margin-bottom:5% ' se uporablja, doda rob od spodnje strani proti sredini elementa, ko pa ' marža na vrhu: -5 % ” dodaja rob 5 % od vrha, vendar v nasprotni smeri (zunaj strani).

Zaključek

V CSS negativni rob deluje v nasprotni smeri z dodeljevanjem vrednosti roba. Premakne vsebino elementa navzven/zunaj strani. »Margin-top:-5« ni enak »margin-bottom:5«, ker obe vrednosti lastnosti premikata vsebino v nasprotnih smereh, ki ustrezata nadrejenemu položaju. Ta članek je uspešno pokazal, kako deluje negativna marža.