'tag at itakda ang' kulay ' sa itim:

>
= '../book.jpg' taas = 'limampung%' ; lapad = 'limampung%' >

= 'kulay ng background: dodgeblue' >

= 'kulay itim;' > Maligayang pagdating sa Linuxhint >
>
>

Matapos i-compile ang code sa itaas, ang output ay ganito ang hitsura:

---

---

Ang '

Ang tag ay nasa ibaba ng webpage bago maglapat ng negatibong margin.

Paggamit ng Negative Margin Top Property

Idagdag ang ' margin-top ” ari-arian sa “

” elemento at ibigay ang halaga nito sa negatibo. Halimbawa, narito -15% ang halaga ng margin-top property:

>
= '../book.jpg' taas = 'limampung%' ; lapad = 'limampung%' >

= 'kulay ng background:dodgeblue' >

= 'kulay: itim; margin-top: -15%;' > Maligayang pagdating sa Linuxhint >
>
>

Pagkatapos isagawa ang code, magiging ganito ang webpage:

Ipinapakita ng output na ginagawa ng negatibong margin-top ang '

' na elementong ipinapakita sa harap ng parent na elemento.

Paggamit ng Negatibong Margin Bottom Property

Ilapat ang parehong mga katangian tulad ng nasa itaas at baguhin lamang ang ' margin-ibaba ” ari-arian. Pagkatapos noon, magdagdag ng larawan sa ibaba ng elementong “

” para makita ang mga visual na pagbabago:

< div istilo = 'kulay ng background:dodgeblue' >
< h3 istilo = 'kulay: itim; margin-bottom: -5%;' > Maligayang pagdating sa Linuxhint h3 >
div >
< img src = '../book.jpg' taas = 'limampung%' ; lapad = 'limampung%' >

Pagkatapos i-update ang code, ganito ang hitsura ng aming webpage:

Ang output sa itaas ay nagpapakita na ang teksto ay nakakakuha ng ibabang margin na -5%.

Paggamit ng Negative Margin Right Property

Sa pamamagitan ng pagbibigay ng -55% na halaga ng margin-right property sa

element, ito ay gumagalaw sa kabaligtaran na direksyon:

< div istilo = 'kulay ng background:dodgeblue;' >
< h3 istilo = 'kulay: itim; margin-kaliwa: -55%; ' > Maligayang pagdating sa Linuxhint < / h3 >
< / div >
< img src = '../book.jpg' taas = 'limampung%' ; lapad = 'limampung%' >

Pagkatapos isagawa ang output ng code ay ganito ang hitsura:

Ipinapakita ng output na nakukuha ng text ang negatibong margin-right.

Paggamit ng Negative Margin Left Property

Ang margin-left property na may negatibong value ay gumagana sa parehong paraan. Sa code sa ibaba, ang elementong '

' ay gumagalaw ng 50% sa kaliwang bahagi sa kabaligtaran ng direksyon patungo sa margin-left property:

= 'kulay ng background:dodgeblue;' >

= 'kulay: itim; margin-kaliwa: -50%;' > Maligayang pagdating sa Linuxhint >
>
= '../book.jpg' taas = 'limampung%' ; lapad = 'limampung%' >

Ang output ng code sa itaas ay:

Iyan ay kung paano gumagana ang negatibong margin sa CSS.

Bakit margin-top:-5 != margin-bottom:5?

kapag ang ' margin-bottom:5% ' ay ginagamit ito ay nagdaragdag ng margin mula sa ilalim na bahagi patungo sa gitna ng elemento ngunit kapag ' margin-top:-5% Ang ” ay ginagamit nagdaragdag ito ng margin na 5% mula sa itaas ngunit sa kabaligtaran ng direksyon(sa labas ng pahina).

Konklusyon

Sa CSS, gumagana ang negatibong margin sa kabaligtaran na direksyon sa pamamagitan ng pagtatalaga ng halaga ng margin. Inililipat nito ang nilalaman ng elemento sa palabas na direksyon/sa labas ng pahina. Ang “margin-top:-5″ ay hindi katumbas ng “margin-bottom:5” dahil inililipat ng parehong value ng property ang content sa magkasalungat na direksyon na tumutugma sa posisyon ng magulang. Matagumpay na naipakita ng artikulong ito kung paano gumagana ang negatibong margin.