Margina vrijednost i mogućnosti u CSS-u

Magrin CSS kontrolira uvlačenje elemenata. Elementi u HTML-u su pravokutnici. Imaju granice, margine i padding.

Područje margina je prostor izvan granica elementa. Svojstvo se koristi za postavljanje udaljenosti između elemenata i njihovo pozicioniranje na stranici.

alineje

Svojstvo margina u CSS-u može se postaviti na%, px, vh / vw, em i rem. Vrijednost margina može se naslijediti od nadređenog elementa (naslijediti) ili automatski izračunati u pregledniku (auto). Vrijednosti za marginu u CSS-u mogu biti izrađene na mnogo načina (primjeri su dani u em-skalabilnim jedinicama, ovisno o veličini fonta elementa).

Načini postavljanja vrijednosti za uvlake:

• za svaku stranu (gore, desno, dno, lijevo) elementa (na primjer, određena je vrijednost gornjeg vanjskog udubljenja od ruba središnjeg elementa);

 .center {margin-top: 1em;} 

• za suprotne strane (prvo vrijednosti za vrh i dno, zatim za lijevo i desno);

 .center {margin: 1em, 0.5em;} 

• za tri strane (vrijednost za marginu-vrh označena je prva, druga za lijevu i desnu, treća za dno);

 .center {margin: 0em 1.1em 2em;} 

• za svaku stranu možete naizmjenično odrediti vrijednosti (margina-gore, margina-desno, itd.) ili u jednom retku od vrha prema lijevo u smjeru kazaljke na satu;

 .center {margin: 0.5em 1em 1.5em 2em;} 

• vrijednost elementa margine može biti ista za svaku stranu;

 .center {margin: 1em;} 

• vrijednost margine možda neće biti postavljena;

• vrijednost margine može biti negativna, na primjer, u CSS-u, gornja granica s negativnom vrijednošću pomiče element gore;

 .center {margin-top: -1em;} 

• sve strane elementa mogu imati negativnu vrijednost margine, a zatim "oslobađa" prostor za svoje okolne elemente s dna i sa desne strane i "udara" lijeve i gornje elemente;

 .center {margin: -1em;} 

Negativna uvlaka

Negativne uvlake se često koriste za promjenu položaja elementa. Kada koristite negativnu marginu, element oslobađa prostor za druge kada se kreće. Elementi koji imaju primijenjeno svojstvo mogu presjeći druge elemente ili dopustiti drugim elementima da se "prevrnu".

 .first {background-color: white;border: 0.06vw solid gold;box-shadow: 0 0 0.09vw gold;width: 50vw;padding: 2vw;margin-bottom: -1vw;margin-left: -9vw;}.second {background-color: black;color: white;font-size: 0.7rem;width: 10vw;padding: 0.5vw;margin-left: 27vw;} 

Pomoću negativnih margina lijevo i margin-top možete pomicati element ulijevo ili gore. Ako na mjestu gdje se element pomiče već postoje objekti, onda se oni preklapaju.

Margin-bottom i margin-right ne utječu na položaj elementa na koji se primjenjuju, ali za druge objekte postaje manji. Zahvaljujući tome, na slici, blok s imenom autora citata "popeo se" na blok s citatom.

Automatski i naslijedi

Koristeći auto u CSS-u za marginu i poravnavanje teksta s vrijednošću središta ima sličan učinak. Automatski centrira element horizontalno na jednakoj udaljenosti od rubova spremnika.

Prije određivanja automatske vrijednosti, elementi su raspoređeni jedan za drugim bez vanjskih uvlake (osim ako nije drugačije specificirano). Nakon određivanja središnje vrijednosti pomiče se u središte retka.

 .center {margin: auto;} 

Korištenje naslijeđene vrijednosti podrazumijeva nasljeđivanje vrijednosti od nadređenog elementa. Pretpostavimo da nadređeni element ima vrijednost u CSS margin-left, središnji element ima vrijednost navedenu u prethodnom primjeru.

 body {margin-top: 1em;}.center {margin: auto;} 

Roditeljski element, u koji su svi ostali elementi ugrađeni, pomaknut je malo niže u odnosu na svoj stari položaj. Ako promijenite vrijednost margine središnjeg elementa u naslijeđeno, tada će centriranje nestati kao rezultat, a objekt koji naslijedi svojstvo će se pomaknuti dolje na isti način.

 body {margin-top: 1em;}.center {margin: inherit;} 

Korištenje CSS-a u tijelu Margine može dovesti do uvlačenja. Obično, tijelo postavlja marginu na nulu, a padding se koristi ako je potrebno za alineje iz elemenata.

Susjedne stavke

S obzirom na činjenicu da vanjske alineje zapravo nisu dio samog elementa, one često ne funkcioniraju točno onako kako bi se pretpostavljalo pod utjecajem drugih objekata. Jedan primjer tog učinka je učinak uvlačenja.

Pretpostavimo da postoje dva elementa koji se nalaze jedan ispod drugog, oni imaju nulu margine. Ako dodate jednu od tih margina, ne-nultu marginu, možete vidjeti kako se jedan pomak prema drugom elementu. Propisujući sličnu vrijednost drugom elementu, vidimo da se vanjski uvjeti pojavljuju u njemu (pomiče se desno od svog starog položaja), ali udaljenost između njih se ne povećava, iako su poravnani duž horizontalne linije.

 .first {background-color: black;border: 0.1vw solid gold;margin: 3vw;width: 10vw;}.second {background-color: black;border: 0.1vw solid darkslateblue;margin: 3vw;width: 10vw;} 

Sličan učinak će se promatrati ako postavite različite marže za dva elementa. Pobjeđuje vrijednost veće margine, ta vrijednost će biti jednaka udaljenosti između elemenata.

 .first {background-color: black;border: 0.1vw solid gold;margin: 3vw;width: 10vw;}.second {background-color: black;border: 0.1vw solid darkslateblue;margin: 5vw;width: 10vw;} 

Ugrađene stavke

Margina ne radi ispravno s ugniježđenim uvučenim elementima. Ako je gornja alineja propisana za roditeljske i podređene elemente, tada će raditi samo jedan od njih.

 .parent {width: 40vw;height: 20vh;background-color: rgba(214, 254, 255, 0.82);margin-top: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-top: 2vw;} 

Slika prikazuje primjere ponašanja elemenata i kada su granične vrijednosti roditeljskih i podređenih elemenata različite. Kao što možete vidjeti, ako dijete ima vrijednost gornje granice veću od vrijednosti roditelja, roditelj se pomiče točno prema vrijednosti specificiranoj za dijete.

 .parent {width: 25vw;height: 20vh;background-color: rgba(214, 254, 255, 0.82);margin-top: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-top: 4vw;} 

Sličan je učinak uočen u ponašanju udubljenja, kada je visina roditeljskog elementa auto postavljena na donju alineju nadređenih i podređenih elemenata. Prioritet veće alineje također je sačuvan u ovom slučaju.

 .parent {width: 25vw;height: auto;background-color: rgba(214, 254, 255, 0.82);margin-bottom: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-bottom: 4vw;} 

Prazne stavke

Prazni elementi sažimaju gornju i donju marginu. I formalno će postojati, objekt će se povećavati, ali zapravo će elementi pored njega biti pod utjecajem samo jedne vrijednosti.

 .first {background-color: black;width: 10vw;}.second_empty {width: 10vw;margin-top: 5vw;margin-bottom: 10vw;}.third {background-color: rgba(199, 90, 175, 0.76);width: 10vw;} 

Iznimke i pravila

U mnogim razmatranim slučajevima dodavanje dodatnih svojstava elementu omogućuje uklanjanje pojave kolapsa. Nestanak kolapsa posljedica je činjenice da alineji dvaju elemenata prestaju do potpunog kontakta.

Problemi kolapsa između roditeljskih i podređenih elemenata mogu se izbjeći samo umetanjem nečega između njih, na primjer, dodavanjem granice podređenom elementu. Da se kolaps ne dogodi između susjednih objekata, bolje je propisati marginu u jednom smjeru.

Neka uobičajena pravila za korištenje margine:

• bolje je pisati uvlake u jednom smjeru za sve elemente (desno i dolje);
• formiranje udaljenosti između elemenata ne bi se smjelo odvijati na štetu dječjih elemenata;
• udubljenje djeteta unutar roditelja od granica roditelja propisano je uz pomoć obloge roditelja, a ne margine djeteta.

Margina u CSS-u je jedno od svojstava elementa koje vam omogućuje kontrolu njegovog položaja na stranici u odnosu na druge objekte. Svojstvo ima četiri varijacije koje vam omogućuju da promijenite položaj elementa vodoravno i okomito. Jedan od problema korištenja marže je kolaps indenata (kombiniranje dvije alineje u jednu).