' margin-top Īpašums palīdz daudziem izstrādātājiem izveidot adaptīvus izkārtojumus un pozicionēt HTML elementus. Rekvizīta “margin-top” izmantošana nodrošina lielāku kontroli pār HTML elementiem, pievieno vizuālu atdalīšanu un palīdz izveidot labāk reaģējošus dizainus. Šajā rokasgrāmatā ir parādīts augšējās robežas rekvizīts ar praktisku ieviešanu CSS.
- Kas ir “margin-top” īpašums?
- Izmantojiet “margin-top” rekvizītu ar pozitīvu vērtību
- Izmantojiet “margin-top” īpašumu ar negatīvu vērtību
Kas ir “margin-top” īpašums?
' margin-top Īpašums tiek izmantots, lai starp HTML elementiem izveidotu papildu vietu. To var iestatīt gan ar pozitīvām, gan negatīvām vērtībām. Šīs vērtības tiek iestatītas atbilstoši dizaina vajadzībām un palīdz novērst pārklāšanos un pielāgot atstarpes starp HTML elementiem.
Kā izmantot “margin-top” īpašumu ar pozitīvu vērtību?
Rekvizīts “margin-top” ar pozitīvu vērtību pievieno papildu atstarpi no augšējās pozīcijas virzienā uz atlasītā HTML elementa centru. Norādītā vērtība var būt pikseļos, procentos, rem vai globālās vērtībās, piemēram, auto, inherit, unset utt. Apskatīsim piemēru, lai labāk izprastu:
Piemērs: Pozitīvās vērtības izmantošana
Pieņemsim HTML failu, kas izveido “ Pēc HTML struktūras izveides izmantojiet CSS rekvizītus “ pozitīvs ” klase: Iepriekš minētajā koda fragmentā: Pēc iepriekš minētā koda fragmenta izpildes tīmekļa lapa izskatās šādi: Iepriekš redzamais gif ilustrē ietekmi, ko rada malas augšdaļas rekvizīta vērtības iestatīšana tīmekļa lapā. ' margin-top ” rekvizīts ar negatīvu vērtību iestata papildu atstarpes no augšējās pozīcijas pretī centram vai uz lapas ārpusi attiecībā pret atlasīto HTML elementu. To galvenokārt izmanto pārklājošu efektu radīšanai vai HTML elementa pozicionēšanai. Lai labāk izprastu, apskatīsim piemēru. Piemērs: Negatīvās vērtības izmantošana Pieņemsim HTML failu, kas izveido “ Iepriekš norādītā koda fragmenta apraksts ir aprakstīts tālāk: Pēc iepriekš minētā koda fragmenta izpildes tīmekļa lapa izskatās šādi: Iepriekš redzamais gif parāda ietekmi, kas rodas tīmekļa lapas noformējumā, iestatot negatīvo vērtību augšdaļas rekvizītam. ' margin-top Īpašums tiek izmantots, lai starp HTML elementiem izveidotu papildu vietu. To var iestatīt gan ar pozitīvām, gan negatīvām vērtībām. Ja rekvizītam “margin-top” ir piešķirta pozitīva vērtība, papildu atstarpe tiek pievienota tīmekļa lapas vai atlasītā HTML elementa centram. “Negatīvās” vērtības gadījumā atstarpe tiek pievienota, bet virzienā uz lapas ārpusi. Šajā rakstā ir parādīts, kas ir CSS maržas augšdaļas īpašums.
< ķermeni >
< div klasē = 'pozitīvs' >
< lpp > Tiek piešķirta piemales augšdaļa ar pozitīvu vērtību lpp >
div >
ķermeni >
< stils >
.pozitīvs {
platums: 300 pikseļi;
augstums: 200 pikseļi;
fona krāsa: mežzaļš;
fonta izmērs: 20 pikseļi;
krāsa: #fff;
augšdaļa: 50 pikseļi;
}
stils >
Kā izmantot “margin-top” īpašumu ar negatīvu vērtību?
.negatīvs {
krāsa: balta;
teksta līdzināšana: centrs;
fona krāsa: sarkans ;
piemale augšpusē: -30 pikseļi ;
polsterējums: 30 pikseļi;
augstums: 100 pikseļi;
}
stils >
< ķermeni >
< div klasē = 'negatīvs' >
Tiek piešķirta negatīvā vērtība priekš Īpašums ar robežu
div >
ķermeni >
Secinājums