” tag a nastavte jeho “ barva “ do černé:

>
= '../kniha.jpg' výška = 'padesáti%' ; šířka = 'padesáti%' >

= 'barva pozadí: dodgerblue' >

= 'Černá barva;' > Vítejte v Linuxhint >
>
>

Po zkompilování výše uvedeného kódu vypadá výstup takto:

---

---

'

” je ve spodní části webové stránky před použitím záporného okraje.

Použití Negative Margin Top Property

Přidat “ margin-top „nemovitost do „

” a uveďte jeho hodnotu záporně. Například zde -15 % je hodnota vlastnosti margin-top:

>
= '../kniha.jpg' výška = 'padesáti%' ; šířka = 'padesáti%' >

= 'barva pozadí:dodgerblue' >

= 'barva: černá; horní okraj: -15 %;' > Vítejte v Linuxhint >
>
>

Po provedení kódu bude webová stránka vypadat takto:

Výstup zobrazí, že záporný okraj-top způsobí zobrazení prvku „

“ před nadřazeným prvkem.

Použití vlastnosti Negative Margin Bottom

Použijte stejné vlastnosti jako výše a změňte pouze „ okraj-dole ' vlastnictví. Poté přidejte obrázek do spodní části prvku „

“, abyste viděli vizuální změny:

< div styl = 'barva pozadí:dodgerblue' >
< h3 styl = 'barva: černá; spodní okraj: -5 %;' > Vítejte v Linuxhintu h3 >
div >
< img src = '../kniha.jpg' výška = 'padesáti%' ; šířka = 'padesáti%' >

Po aktualizaci kódu naše webová stránka vypadá takto:

Výše uvedený výstup ukazuje, že text získává spodní okraj -5 %.

Použití Negative Margin Right Property

Přidělením hodnoty -55 % vlastnosti margin-right prvku

se prvek pohybuje opačným směrem:

< div styl = 'background-color:dodgerblue;' >
< h3 styl = 'barva: černá; levý okraj: -55 %; ' > Vítejte v Linuxhintu < / h3 >
< / div >
< img src = '../kniha.jpg' výška = 'padesáti%' ; šířka = 'padesáti%' >

Po provedení výstupu kódu vypadá takto:

Výstup ukazuje, že text získává záporný okraj vpravo.

Použití vlastnosti levého záporného okraje

Vlastnost margin-left se zápornou hodnotou funguje stejným způsobem. V níže uvedeném kódu se prvek „

“ přesune o 50 % doleva v opačném směru než vlastnost margin-left:

= 'background-color:dodgerblue;' >

= 'barva: černá; levý okraj: -50 %;' > Vítejte v Linuxhint >
>
= '../kniha.jpg' výška = 'padesáti%' ; šířka = 'padesáti%' >

Výstup výše uvedeného kódu je:

Tak funguje záporná marže v CSS.

Proč je margin-top:-5 != margin-bottom:5?

Když ' dolní okraj: 5 % ” se používá, přidává okraj ze spodní strany směrem ke středu prvku, ale když “ margin-top:-5% ” se používá, přidává okraj 5 % shora, ale v opačném směru (mimo stránku).

Závěr

V CSS funguje záporný okraj v opačném směru přiřazením hodnoty okraje. Posouvá obsah prvku směrem ven/mimo stránku. „margin-top:-5″ se nerovná „margin-bottom:5“, protože obě hodnoty vlastnosti posouvají obsah v opačných směrech, které odpovídají poloze rodiče. Tento článek úspěšně demonstroval, jak funguje záporná marže.