' margin-top ” svojstvo pomaže mnogim programerima u stvaranju responzivnih izgleda i pozicioniranju HTML elemenata. Korištenje svojstva 'margin-top' pruža veću kontrolu nad HTML elementima, dodaje vizualno odvajanje i pomaže u stvaranju boljeg responzivnog dizajna. Ovaj vodič demonstrira svojstvo margin-top s praktičnom primjenom u CSS-u.
- Što je 'margin-top' svojstvo?
- Koristite svojstvo 'margin-top' s pozitivnom vrijednošću
- Koristite svojstvo 'margin-top' s negativnom vrijednošću
Što je 'margin-top' svojstvo?
' margin-top ” Svojstvo se koristi za stvaranje dodatnog prostora između HTML elemenata. Može se postaviti s pozitivnim i negativnim vrijednostima. Ove vrijednosti su postavljene prema potrebama dizajna i pomažu u sprječavanju preklapanja i prilagođavanju razmaka između HTML elemenata.
Kako koristiti svojstvo 'margin-top' s pozitivnom vrijednošću?
Svojstvo 'margin-top' s pozitivnom vrijednošću dodaje dodatni razmak od gornje pozicije prema središtu odabranog HTML elementa. Navedena vrijednost može biti u pikselima, postotku, rem ili u globalnim vrijednostima kao što su auto, inherit, unset, itd. Prođimo kroz primjer za bolje razumijevanje:
Primjer: korištenje pozitivne vrijednosti
Pretpostavimo HTML datoteku koja stvara ' Nakon stvaranja HTML strukture, primijenite CSS svojstva na ' pozitivan ” klasa: U gornjem isječku koda: Nakon izvršenja gornjeg isječka koda, web stranica izgleda ovako: Gornji gif ilustrira učinak postavljanja vrijednosti svojstva margin-top na web stranici. ' margin-top ” svojstvo s negativnom vrijednošću postavlja dodatni razmak od gornje pozicije nasuprot središtu ili prema vanjskoj strani stranice u odnosu na odabrani HTML element. Uglavnom se koristi za stvaranje preklapajućih efekata ili za pozicioniranje HTML elementa. Prođimo kroz primjer za bolje razumijevanje. Primjer: korištenje negativne vrijednosti Pretpostavimo HTML datoteku koja stvara ' Opis gore navedenog isječka koda opisan je u nastavku: Nakon izvršenja gornjeg isječka koda, web stranica izgleda ovako: Gornji gif prikazuje učinak koji se pojavljuje na dizajn web stranice postavljanjem negativne vrijednosti za svojstvo margin-top. ' margin-top ” Svojstvo se koristi za stvaranje dodatnog prostora između HTML elemenata. Može se postaviti s pozitivnim i negativnim vrijednostima. Ako je svojstvu 'margin-top' dodijeljena pozitivna vrijednost, onda se dodatni prostor dodaje prema središtu web stranice ili odabranog HTML elementa. U slučaju 'negativne' vrijednosti, prostor se dodaje, ali prema vanjskoj strani stranice. Ovaj članak pokazuje što je margin-top svojstvo u CSS-u.
< tijelo >
< div razreda = 'pozitivan' >
< str > Dodjeljuje se vrh margine s pozitivnom vrijednošću str >
div >
tijelo >
< stil >
.pozitivan {
širina: 300px;
visina: 200px;
boja pozadine: šumsko zelena;
veličina fonta: 20px;
boja: #F F F;
margin-top: 50px;
}
stil >
Kako koristiti svojstvo 'margin-top' s negativnom vrijednošću?
.negativan {
boja: bijela;
poravnanje teksta: središte;
boja pozadine: Crvena ;
margin-top: -30px ;
ispuna: 30px;
visina: 100px;
}
stil >
< tijelo >
< div razreda = 'negativan' >
Dodijeljena je negativna vrijednost za Margin-top imovina
div >
tijelo >
Zaključak