' silt ja määrake selle ' värvi ” mustaks:

>
= '../book.jpg' kõrgus = 'viiskümmend%' ; laius = 'viiskümmend%' >

= 'taustavärv: dodgerblue' >

= 'värv: must;' > Tere tulemast Linuxhinti >
>
>

Pärast ülaltoodud koodi koostamist näeb väljund välja järgmine:

---

---

'

” märgend on enne negatiivse veerise rakendamist veebilehe allosas.

Negatiivse marginaali ülemise atribuudi kasutamine

Lisama ' margin-top ' vara '

” element ja anna selle väärtus negatiivses vormis. Näiteks siin -15% on marginaali ülemise atribuudi väärtus:

>
= '../book.jpg' kõrgus = 'viiskümmend%' ; laius = 'viiskümmend%' >

= 'taustavärv: dodgerblue' >

= 'värv: must; ülaserv: -15%;' > Tere tulemast Linuxhinti >
>
>

Pärast koodi käivitamist näeb veebileht välja selline:

Väljund kuvab, et negatiivne veerise ülaosa kuvab elemendi “

” emaelemendi ees.

Negatiivse marginaali alumise atribuudi kasutamine

Rakendage ülaltoodud atribuute ja muutke lihtsalt ' margin-alumine ” vara. Pärast seda lisage visuaalsete muudatuste nägemiseks elemendi „

” allserva pilt.

< div stiilis = 'taustavärv: dodgerblue' >
< h3 stiilis = 'värv: must; veeris-alumine: -5%;' > Tere tulemast Linuxhinti h3 >
div >
< img src = '../book.jpg' kõrgus = 'viiskümmend%' ; laius = 'viiskümmend%' >

Pärast koodi värskendamist näeb meie veebileht välja selline:

Ülaltoodud väljund näitab, et teksti alumine veeris on -5%.

Negatiivse marginaali õige atribuudi kasutamine

Andes elemendile

margin-right atribuudi väärtuse -55%, liigub see vastupidises suunas:

< div stiilis = 'background-color:dodgerblue;' >
< h3 stiilis = 'värv: must; veeris vasak: -55%; ' > Tere tulemast Linuxhinti < / h3 >
< / div >
< img src = '../book.jpg' kõrgus = 'viiskümmend%' ; laius = 'viiskümmend%' >

Pärast koodi käivitamist näeb väljund välja järgmine:

Väljund näitab, et tekst saab negatiivse veerise paremale.

Negatiivse marginaali vasaku atribuudi kasutamine

Negatiivse väärtusega margin-left atribuut töötab samamoodi. Allolevas koodis liigub element „

” 50% võrra vasakule, vastupidises suunas atribuudile margin-left:

= 'background-color:dodgerblue;' >

= 'värv: must; veeris vasak: -50%;' > Tere tulemast Linuxhint >
>
= '../book.jpg' kõrgus = 'viiskümmend%' ; laius = 'viiskümmend%' >

Ülaltoodud koodi väljund on:

Nii toimib negatiivne marginaal CSS-is.

Miks on margin-top:-5 != margin-bottom:5?

Kui ' marginaal-alumine: 5% ' on kasutatud, lisab see veerise alumisest servast elemendi keskkoha suunas, kuid kui ' margin-top: -5% ”, lisab see ülaosast 5% veerise, kuid vastupidises suunas (väljaspool lehte).

Järeldus

CSS-is töötab negatiivne veeris vastupidises suunas, määrates marginaali väärtuse. See liigutab elemendi sisu väljapoole/lehest väljapoole. 'Margin-top:-5' ei ole võrdne 'margin-bottom:5', kuna mõlemad atribuudi väärtused liigutavad sisu vastupidistes suundades, mis vastavad põhipositsioonile. See artikkel on edukalt näidanud, kuidas negatiivne marginaal töötab.