« margin-topp ”-egenskapen hjelper mange utviklere med å lage responsive layouter og plassere HTML-elementer. Bruken av egenskapen 'margin-top' gir mer kontroll over HTML-elementer, legger til visuell separasjon og hjelper til med å skape bedre responsive design. Denne guiden demonstrerer margin-top-egenskapen med praktisk implementering i CSS.
- Hva er «margin-top»-eiendommen?
- Bruk egenskapen 'margin-top' med en positiv verdi
- Bruk egenskapen 'margin-top' med en negativ verdi
Hva er «margin-top»-eiendommen?
« margin-topp ”-egenskapen brukes for å skape ekstra plass mellom HTML-elementer. Den kan stilles inn med både positive og negative verdier. Disse verdiene settes i henhold til designbehovene og hjelper til med å forhindre overlapping og justere avstanden mellom HTML-elementene.
Hvordan bruke 'margin-top' eiendom med en positiv verdi?
'Margin-top'-egenskapen med en positiv verdi legger til ekstra mellomrom fra toppposisjonen mot midten av det valgte HTML-elementet. Den angitte verdien kan være i piksler, prosent, rem eller i globale verdier som auto, inherit, unset osv. La oss gå gjennom et eksempel for bedre forståelse:
Eksempel: Utnyttelse av positiv verdi
La oss anta en HTML-fil som lager en ' Etter opprettelsen av HTML-strukturen, bruk CSS-egenskaper på ' positivt ' klasse: I kodebiten ovenfor: Etter utførelse av kodebiten ovenfor, ser nettsiden slik ut: GIF-en ovenfor illustrerer effekten av å angi verdien til margin-top-egenskapen på nettsiden. « marg-topp ” egenskap med en negativ verdi setter ekstra avstand fra toppposisjonen motsatt av midten eller mot utsiden av siden i forhold til det valgte HTML-elementet. Det brukes mest for å lage overlappende effekter eller i posisjoneringen av HTML-elementet. La oss gå gjennom et eksempel for bedre forståelse. Eksempel: Utnyttelse av negativ verdi La oss anta en HTML-fil som lager en ' Beskrivelsen av kodebiten ovenfor er beskrevet nedenfor: Etter utførelse av kodebiten ovenfor, ser nettsiden slik ut: GIF-en ovenfor viser effekten som oppstår på utformingen av nettsiden ved å angi den negative verdien for margin-top-egenskapen. « margin-topp ”-egenskapen brukes for å skape ekstra plass mellom HTML-elementer. Den kan stilles inn med både positive og negative verdier. Hvis egenskapen 'margin-top' er tildelt en positiv verdi, legges den ekstra plassen til mot midten av nettsiden eller det valgte HTML-elementet. Ved en 'negativ' verdi legges plassen til, men mot utsiden av siden. Denne artikkelen viser hva som er margin-top-eiendom i CSS.
< kropp >
< div klasse = 'positiv' >
< s > Margtopp med positiv verdi tildeles s >
div >
kropp >
< stil >
.positiv {
bredde: 300px;
høyde: 200px;
bakgrunnsfarge: skoggrønn;
skriftstørrelse: 20px;
farge: #fff;
marg-top: 50px;
}
stil >
Hvordan bruke «margin-top»-eiendommen med en negativ verdi?
.negativ {
farge: hvit;
tekst-align: center;
bakgrunnsfarge: rød ;
margin-top: -30 px ;
polstring: 30px;
høyde: 100px;
}
stil >
< kropp >
< div klasse = 'negativ' >
Den negative verdien tildeles til Margin-topp eiendom
div >
kropp >
Konklusjon