” tag a nastavte jeho “ farba “ na čierno:

>
= '../kniha.jpg' výška = 'päťdesiat percent' ; šírka = 'päťdesiat percent' >

= 'farba pozadia: dodgerblue' >
štýl = 'farba: čierna;' > Vitajte v Linuxhint >
>
>

Po skompilovaní vyššie uvedeného kódu bude výstup vyzerať takto:

---

---

'

” sa nachádza v spodnej časti webovej stránky pred použitím záporného okraja.

Použitie vrchnej vlastnosti zápornej marže

Pridať “ margin-top ” nehnuteľnosť do “

“ a uveďte jeho hodnotu záporne. Napríklad tu -15 % je hodnota vlastnosti margin-top:

>
= '../kniha.jpg' výška = 'päťdesiat percent' ; šírka = 'päťdesiat percent' >

= 'farba pozadia:dodgerblue' >
štýl = 'farba: čierna; horný okraj: -15 %;' > Vitajte v Linuxhint >
>
>

Po vykonaní kódu bude webová stránka vyzerať takto:

Na výstupe sa zobrazí, že negatívny okraj-vrchol spôsobí, že prvok „

“ sa zobrazí pred nadradeným prvkom.

Použitie vlastnosti Negative Margin Bottom

Použite rovnaké vlastnosti ako vyššie a zmeňte iba „ okraj-dole ' nehnuteľnosť. Potom pridajte obrázok do spodnej časti prvku „

“, aby ste videli vizuálne zmeny:

< div štýl = 'farba pozadia:dodgerblue' >
< h3 štýl = 'farba: čierna; okraj dole: -5 %;' > Vitajte v Linuxhint h3 >
div >
< img src = '../kniha.jpg' výška = 'päťdesiat percent' ; šírka = 'päťdesiat percent' >

Po aktualizácii kódu naša webová stránka vyzerá takto:

Vyššie uvedený výstup ukazuje, že spodný okraj textu je -5 %.

Použitie Negative Margin Right Property

Pridaním -55 % hodnoty vlastnosti margin-right prvku

sa prvok pohne opačným smerom:

< div štýl = 'farba pozadia:dodgerblue;' >
< h3 štýl = 'farba: čierna; ľavý okraj: -55 %; ' > Vitajte v Linuxhint < / h3 >
< / div >
< img src = '../kniha.jpg' výška = 'päťdesiat percent' ; šírka = 'päťdesiat percent' >

Po vykonaní výstupu kódu vyzerá takto:

Výstup ukazuje, že text má záporný okraj vpravo.

Použitie vlastnosti ľavého záporného okraja

Vlastnosť margin-left so zápornou hodnotou funguje rovnakým spôsobom. V nižšie uvedenom kóde sa prvok „

“ presunie o 50 % doľava v opačnom smere ako vlastnosť margin-left:

= 'farba pozadia:dodgerblue;' >

= 'farba: čierna; ľavý okraj: -50 %;' > Vitajte v Linuxhint >
>
= '../kniha.jpg' výška = 'päťdesiat percent' ; šírka = 'päťdesiat percent' >

Výstup vyššie uvedeného kódu je:

Takto funguje záporná marža v CSS.

Prečo je margin-top:-5 != margin-bottom:5?

Keď ' okraj-dole: 5 % ” sa používa, pridáva okraj zo spodnej strany smerom k stredu prvku, ale keď “ margin-top:-5% ” sa používa, pridáva okraj 5 % zhora, ale v opačnom smere (mimo stránky).

Záver

V CSS funguje záporný okraj v opačnom smere priradením hodnoty okraja. Posúva obsah prvku smerom von/mimo stránky. Hodnota „margin-top:-5“ sa nerovná „margin-bottom:5“, pretože obe hodnoty vlastnosti posúvajú obsah v opačných smeroch, ktoré zodpovedajú polohe rodiča. Tento článok úspešne ukázal, ako funguje záporná marža.