' margin-top ” Lastnost pomaga številnim razvijalcem pri ustvarjanju odzivnih postavitev in pozicioniranju elementov HTML. Uporaba lastnosti »margin-top« zagotavlja večji nadzor nad elementi HTML, doda vizualno ločitev in pomaga pri ustvarjanju boljših odzivnih dizajnov. Ta vodnik prikazuje lastnost margin-top s praktično implementacijo v CSS.
- Kaj je »margin-top« lastnina?
- Uporabite lastnost »margin-top« s pozitivno vrednostjo
- Uporabite lastnost »margin-top« z negativno vrednostjo
Kaj je »margin-top« lastnina?
' margin-top Lastnost se uporablja za ustvarjanje dodatnega prostora med elementi HTML. Lahko se nastavi s pozitivnimi in negativnimi vrednostmi. Te vrednosti so nastavljene glede na potrebe oblikovanja in pomagajo pri preprečevanju prekrivanja in prilagajanju razmika med elementi HTML.
Kako uporabiti lastnost »margin-top« s pozitivno vrednostjo?
Lastnost »margin-top« s pozitivno vrednostjo doda dodaten razmik od zgornjega položaja proti sredini izbranega elementa HTML. Navedena vrednost je lahko v slikovnih pikah, odstotkih, rem ali v globalnih vrednostih, kot so auto, inherit, unset itd. Oglejmo si primer za boljše razumevanje:
Primer: uporaba pozitivne vrednosti
Predpostavimo, da datoteka HTML ustvari ' Po izdelavi strukture HTML uporabite lastnosti CSS za ' pozitivno ” razred: V zgornjem delčku kode: Po izvedbi zgornjega delčka kode je spletna stran videti takole: Zgornji gif ponazarja učinek nastavitve vrednosti lastnosti margin-top na spletni strani. ' margin-top ” lastnost z negativno vrednostjo nastavi dodaten razmik od zgornjega položaja nasproti sredine ali proti zunanjosti strani glede na izbrani element HTML. Večinoma se uporablja za ustvarjanje prekrivajočih se učinkov ali pri pozicioniranju elementa HTML. Sprehodimo se skozi primer za boljše razumevanje. Primer: uporaba negativne vrednosti Predpostavimo, da datoteka HTML ustvari ' Opis zgoraj navedenega delčka kode je opisan spodaj: Po izvedbi zgornjega delčka kode se spletna stran prikaže takole: Zgornji gif prikazuje učinek, ki se pojavi na zasnovi spletne strani z nastavitvijo negativne vrednosti za lastnost margin-top. ' margin-top Lastnost se uporablja za ustvarjanje dodatnega prostora med elementi HTML. Lahko se nastavi s pozitivnimi in negativnimi vrednostmi. Če je lastnosti »margin-top« dodeljena pozitivna vrednost, se dodaten prostor doda proti sredini spletne strani ali izbranega elementa HTML. V primeru negativne vrednosti se doda prostor, vendar proti zunanjosti strani. Ta članek prikazuje, kaj je lastnost margin-top v CSS.
< telo >
< div razred = 'pozitivno' >
< str > Dodeljen je vrh roba s pozitivno vrednostjo str >
div >
telo >
< stil >
.pozitiven {
širina: 300px;
višina: 200px;
barva ozadja: gozdno zelena;
velikost pisave: 20px;
barva: #fff;
zgornji rob: 50 slikovnih pik;
}
stil >
Kako uporabiti lastnost »margin-top« z negativno vrednostjo?
.negativno {
barva: bela;
poravnava besedila: sredina;
Barva ozadja: rdeča ;
rob zgoraj: -30 slikovnih pik ;
oblazinjenje: 30px;
višina: 100 slikovnih pik;
}
stil >
< telo >
< div razred = 'negativno' >
Dodeljena je negativna vrednost za Lastnina na vrhu marže
div >
telo >
Zaključek