Ano ang margin-top Property sa CSS?

Ano Ang Margin Top Property Sa Css



Ang ' margin-top ” Ang property ay nakakatulong sa maraming developer sa paggawa ng mga tumutugon na layout at pagpoposisyon ng mga elemento ng HTML. Ang paggamit ng property na 'margin-top' ay nagbibigay ng higit na kontrol sa mga elemento ng HTML, nagdaragdag ng visual separation, at nakakatulong sa paglikha ng mas mahusay na tumutugon na mga disenyo. Ipinapakita ng gabay na ito ang margin-top property na may praktikal na pagpapatupad sa CSS.

Ano ang 'margin-top' na Ari-arian?

Ang ' margin-top Ang ” property ay ginagamit para sa paglikha ng dagdag na espasyo sa pagitan ng mga elemento ng HTML. Maaari itong itakda sa parehong positibo at negatibong mga halaga. Ang mga halagang ito ay itinakda ayon sa mga pangangailangan ng disenyo at nakakatulong sa pagpigil sa pag-overlay at pagsasaayos ng espasyo sa pagitan ng mga elemento ng HTML.





Paano Gamitin ang 'margin-top' na Ari-arian na may Positibong Halaga?

Ang property na 'margin-top' na may positibong halaga ay nagdaragdag ng dagdag na espasyo mula sa tuktok na posisyon patungo sa gitna ng napiling elemento ng HTML. Ang ibinigay na halaga ay maaaring nasa mga pixel, porsyento, rem, o sa mga pandaigdigang halaga tulad ng auto, inherit, unset, atbp. Maglakad tayo sa isang halimbawa para sa mas mahusay na pag-unawa:



Halimbawa: Paggamit ng Positibong Halaga



Ipagpalagay natin ang isang HTML file na lumilikha ng isang “

” tag at nagbibigay ng dummy data. Susunod, italaga ang ' positibo ” value sa klase ng elementong “div”:



< katawan >
< div klase = 'positibo' >
< p > Ang margin sa itaas na may positibong halaga ay itinalaga p >
div >
katawan >

Pagkatapos ng paglikha ng istraktura ng HTML, ilapat ang mga katangian ng CSS sa ' positibo 'klase:



< istilo >
.positibo {
lapad: 300px;
taas: 200px;
kulay ng background: forestgreen;
laki ng font: 20px;
kulay: #fff;
margin-top: 50px;
}
istilo >

Sa snippet ng code sa itaas:

  • Una, itakda ang mga halaga ng ' 300px 'at' 200px 'sa CSS' lapad 'at' taas ” properties, ayon sa pagkakabanggit.
  • Susunod, ang ' kulay ng background ”, “ laki ng font ”, at “ kulay ” Ang mga katangian ng CSS ay ginagamit para sa mas mahusay na layunin ng visualization.
  • Sa huli, ang '50px' na halaga ay ibinibigay sa ' margin-top ” property upang magdagdag ng dagdag na espasyo.

Pagkatapos ng pagpapatupad ng snippet ng code sa itaas, ganito ang hitsura ng webpage:

Ang gif sa itaas ay naglalarawan ng epekto ng pagtatakda ng halaga ng margin-top property sa webpage.

Paano Gamitin ang 'margin-top' na Ari-arian na may Negatibong Halaga?

Ang ' margin-top ” property na may negatibong value ay nagtakda ng dagdag na espasyo mula sa tuktok na posisyon sa tapat ng gitna o patungo sa labas ng page na nauugnay sa napiling HTML element. Ito ay kadalasang ginagamit para sa paglikha ng magkakapatong na mga epekto o sa pagpoposisyon ng elemento ng HTML.

Maglakad tayo sa isang halimbawa para sa mas mahusay na pag-unawa.

Halimbawa: Paggamit ng Negatibong Halaga

Ipagpalagay natin ang isang HTML file na lumilikha ng isang “

” tag at nagbibigay ng dummy data. Susunod, italaga ang ' negatibo ” value sa klase ng elementong “div”:

< istilo >
.negatibo {
kulay puti;
text-align: center;
kulay ng background: pula ;
margin-top: -30px ;
padding: 30px;
taas: 100px;
}
istilo >
< katawan >
< div klase = 'negatibo' >
Ang Negatibong Halaga ay itinalaga para sa Ari-arian sa itaas ng margin
div >
katawan >

Ang paglalarawan ng nabanggit na snippet ng code ay inilarawan sa ibaba:

  • Una, ang ' negatibo Ang 'klase ay pinili sa loob ng '