' -tunniste ja aseta sen ' väri ” mustaksi:

>
= '../book.jpg' korkeus = 'viisikymmentä%' ; leveys = 'viisikymmentä%' >
= 'taustaväri: dodgerblue' >

= 'väri musta;' > Tervetuloa Linuxhintiin >
>
>

Yllä olevan koodin kääntämisen jälkeen tulos näyttää tältä:

---

---

'

” -tunniste on verkkosivun alareunassa ennen negatiivisen marginaalin lisäämistä.

Negatiivisen marginaalin yläominaisuuden käyttäminen

Lisätä ' marginaali yläosa ' omaisuutta '

”-elementti ja anna sen arvo negatiivisena. Esimerkiksi tässä -15 % on marginaalin yläosan omaisuuden arvo:

>
= '../book.jpg' korkeus = 'viisikymmentä%' ; leveys = 'viisikymmentä%' >
= 'taustaväri: dodgerblue' >

= 'väri: musta; marginaali yläosa: -15%;' > Tervetuloa Linuxhintiin >
>
>

Koodin suorittamisen jälkeen verkkosivu näyttää tältä:

Tulos näyttää, että negatiivinen marginaalin yläosa saa '

'-elementin näkyviin yläelementin eteen.

Negatiivinen marginaali -ominaisuuden käyttäminen

Käytä samoja ominaisuuksia kuin yllä ja muuta vain ' marginaali-ala ” omaisuutta. Lisää sen jälkeen kuva '

'-elementin alaosaan nähdäksesi visuaaliset muutokset:

< div tyyli = 'taustaväri: dodgerblue' >
< h3 tyyli = 'väri: musta; marginaali-ala: -5%;' > Tervetuloa Linuxhintiin h3 >
div >
< img src = '../book.jpg' korkeus = 'viisikymmentä%' ; leveys = 'viisikymmentä%' >

Koodin päivityksen jälkeen verkkosivumme näyttää tältä:

Yllä oleva tulos osoittaa, että teksti saa -5% alamarginaalin.

Negatiivisen marginaalin oikean ominaisuuden käyttäminen

Antamalla

-elementille marginaali-oikeus -ominaisuuden arvo -55 %, se liikkuu vastakkaiseen suuntaan:

< div tyyli = 'taustaväri: dodgerblue;' >
< h3 tyyli = 'väri: musta; marginaali vasen: -55%; ' > Tervetuloa Linuxhintiin < / h3 >
< / div >
< img src = '../book.jpg' korkeus = 'viisikymmentä%' ; leveys = 'viisikymmentä%' >

Suorituksen jälkeen kooditulostus näyttää tältä:

Tulos osoittaa, että teksti saa negatiivisen marginaalin oikealle.

Negatiivisen marginaalin vasemman ominaisuuden käyttäminen

Marginaalivasen ominaisuus, jolla on negatiivinen arvo, toimii samalla tavalla. Alla olevassa koodissa '

'-elementti siirtyy 50% vasemmalle puolelle marginaali-vasen -ominaisuuden vastakkaiseen suuntaan:

= 'taustaväri: dodgerblue;' >

= 'väri: musta; marginaali vasen: -50%;' > Tervetuloa Linuxhintiin >
>
= '../book.jpg' korkeus = 'viisikymmentä%' ; leveys = 'viisikymmentä%' >

Yllä olevan koodin tulos on:

Näin negatiivinen marginaali toimii CSS:ssä.

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

Kun ' marginaali-ala: 5 % ' käytetään se lisää marginaalin alapuolelta kohti elementin keskustaa, mutta kun ' marginaali yläosa: -5 % ' on käytetty, se lisää 5% marginaalin ylhäältä, mutta vastakkaiseen suuntaan (sivun ulkopuolelle).

Johtopäätös

CSS:ssä negatiivinen marginaali toimii päinvastaiseen suuntaan määrittämällä marginaalin arvon. Se siirtää elementin sisältöä ulospäin/sivun ulkopuolelle. 'Margin-top:-5' ei ole sama kuin 'margin-bottom:5', koska molemmat ominaisuusarvot siirtävät sisältöä vastakkaisiin suuntiin, jotka vastaavat yläasemaa. Tämä artikkeli on osoittanut onnistuneesti, kuinka negatiivinen marginaali toimii.