Ovaj članak pokazuje:
- Kako funkcioniraju negativne margine u CSS-u?
- Upotreba gornjeg svojstva negativne marže
- Korištenje svojstva dna negativne marže
- Korištenje svojstva prava negativne marže
- Korištenje svojstva negativne lijeve margine
- Zašto je margin-top: -5 != margin-bottom: 5?
Kako funkcioniraju negativne margine u CSS-u?
Negativna margina premješta sadržaj izvan stranice. Metoda korištenja negativne margine ista je kao i pozitivna, osim što se uz vrijednost koristi '-'. Slijedite dolje navedene varijacije negativne marže:
Postojeća HTML datoteka Nakon kompajliranja gornjeg koda, izlaz izgleda ovako: ' ” nalazi se na dnu web stranice prije primjene negativne margine. Dodati ' margin-top ' svojstvo za ' ” i dajte mu negativnu vrijednost. Na primjer, ovdje je -15% vrijednost svojstva margin-top: Nakon izvršavanja koda web stranica izgleda ovako: Izlaz prikazuje da negativni vrh margine čini da se element “ Primijenite ista svojstva kao gore i samo promijenite ' margina-dno ” vlasništvo. Nakon toga dodajte sliku na dno elementa “ Nakon ažuriranja koda naša web stranica izgleda ovako: Gornji rezultat pokazuje da tekst dobiva donju marginu od -5%. Davanjem -55% vrijednosti svojstva margin-right Nakon izvođenja koda izlaz izgleda ovako: Izlaz pokazuje da tekst dobiva negativnu marginu desno. Svojstvo margin-left koje ima negativnu vrijednost radi na isti način. U donjem kodu, element “ Izlaz gornjeg koda je: Tako funkcionira negativna margina u CSS-u. Kada ' margina-dno: 5% ' koristi se dodaje margina od donje strane prema središtu elementa, ali kada ' margina-top:-5% ” dodaje marginu od 5% od vrha, ali u suprotnom smjeru (izvan stranice). U CSS-u, negativna margina radi u suprotnom smjeru dodjeljivanjem vrijednosti margine. Pomiče sadržaj elementa prema van/izvan stranice. 'Margin-top:-5' nije jednak 'margin-bottom:5' jer obje vrijednosti svojstva pomiču sadržaj u suprotnim smjerovima u skladu s nadređenom pozicijom. Ovaj je članak uspješno pokazao kako funkcionira negativna margina.
' knjiga.jpg ” je slika pohranjena u lokalnom direktoriju, njezina putanja je navedena kao „ src ” vrijednost. ' širina ' i ' visina ” slike postavljeni su na 50%. Sada stvorite '
= '../book.jpg' visina = 'pedeset%' ; širina = 'pedeset%' >
= 'Crna boja;' > Dobro došli u Linuxhint >
>
>
Upotreba gornjeg svojstva negativne marže
= '../book.jpg' visina = 'pedeset%' ; širina = 'pedeset%' >
= 'boja: crna; margin-top: -15%;' > Dobro došli u Linuxhint >
>
>
” prikazuje ispred nadređenog elementa.
Korištenje svojstva dna negativne marže
< h3 stil = 'boja: crna; margina-dno: -5%;' > Dobrodošli u Linuxhint h3 >
div >
< img src = '../book.jpg' visina = 'pedeset%' ; širina = 'pedeset%' >
Korištenje svojstva prava negativne marže
elementu, on se kreće u suprotnom smjeru:
< div stil = 'color-background:dodgerblue;' >
< h3 stil = 'boja: crna; margina-lijevo: -55%; ' > Dobrodošli u Linuxhint < / h3 >
< / div >
< img src = '../book.jpg' visina = 'pedeset%' ; širina = 'pedeset%' >
Korištenje svojstva negativne lijeve margine
” pomiče se 50% ulijevo u smjeru suprotnom od svojstva margin-left:
= 'boja: crna; margina-lijevo: -50%;' > Dobrodošli u Linuxhint >
>
= '../book.jpg' visina = 'pedeset%' ; širina = 'pedeset%' >
Zašto je margin-top:-5 != margin-bottom:5?
Zaključak