' címkét, és állítsa be a ' szín ” feketére:

>
= '../book.jpg' magasság = 'ötven%' ; szélesség = 'ötven%' >

= 'háttérszín: dodgerblue' >

= 'fekete szín;' > Üdvözöljük a Linuxhint >
>
>

A fenti kód összeállítása után a kimenet így néz ki:

---

---

A '

” címke a weboldal alján található, mielőtt negatív margót alkalmazna.

A negatív margó felső tulajdonságának használata

Add hozzá margin-top ' ingatlan a '

” elemet, és adja meg az értékét negatívban. Például itt -15% a margin-top tulajdonság értéke:

>
= '../book.jpg' magasság = 'ötven%' ; szélesség = 'ötven%' >

= 'háttérszín: dodgerblue' >

= 'szín: fekete; felső margó: -15%;' > Üdvözöljük a Linuxhint >
>
>

A kód végrehajtása után a weboldal így néz ki:

A kimenet azt mutatja, hogy a negatív margó felső része a „

” elemet jeleníti meg a szülőelem előtt.

Negatív margó alsó tulajdonság használata

Alkalmazza ugyanazokat a tulajdonságokat, mint fent, és csak módosítsa a „ margó-alsó ' ingatlan. Ezután adjon hozzá egy képet a „

” elem aljához a vizuális változások megtekintéséhez:

< div stílus = 'háttérszín: dodgerblue' >
< h3 stílus = 'szín: fekete; margó-alsó: -5%;' > Üdvözöljük a Linuxhintben h3 >
div >
< img src = '../book.jpg' magasság = 'ötven%' ; szélesség = 'ötven%' >

A kód frissítése után weboldalunk így néz ki:

A fenti kimenet azt mutatja, hogy a szöveg -5%-os alsó margót kap.

A negatív árrés jobb tulajdonságának használata

Ha a

elemnek a margin-right tulajdonság -55% értékét adjuk, akkor az ellenkező irányba mozog:

< div stílus = 'háttérszín: dodgerblue;' >
< h3 stílus = 'szín: fekete; bal margó: -55%; ' > Üdvözöljük a Linuxhintben < / h3 >
< / div >
< img src = '../book.jpg' magasság = 'ötven%' ; szélesség = 'ötven%' >

A kód végrehajtása után a kimenet így néz ki:

A kimenet azt mutatja, hogy a szöveg a negatív jobb margót kapja.

Negatív margó bal tulajdonság használata

Ugyanígy működik a negatív értékű margó-bal tulajdonság is. Az alábbi kódban a „

” elem 50%-kal balra mozdul el a margin-left tulajdonsággal ellentétes irányba:

= 'háttérszín: dodgerblue;' >

= 'szín: fekete; margó bal: -50%;' > Üdvözöljük a Linuxhint >
>
= '../book.jpg' magasság = 'ötven%' ; szélesség = 'ötven%' >

A fenti kód kimenete:

Így működik a negatív margó a CSS-ben.

Miért margin-top:-5 != margin-bottom:5?

Amikor az ' margó-alsó: 5% ' használatakor margót ad hozzá az alsó oldaltól az elem közepe felé, de amikor ' margó felső: -5% ” használatakor 5%-os margót ad hozzá felülről, de az ellenkező irányban (az oldalon kívül).

Következtetés

A CSS-ben a negatív margó az ellenkező irányban működik a margó értékének hozzárendelésével. Az elem tartalmát a kifelé/oldalon kívülre mozgatja. A „margin-top:-5” nem egyenlő a „margin-bottom:5”-tel, mert mindkét tulajdonságérték ellentétes irányba mozgatja a tartalmat a szülőpozíciónak megfelelően. Ez a cikk sikeresen bemutatta a negatív margó működését.