Magrin u CSS-u regulira vanjske udubljenja elemenata. Elementi HTML-a su pravokutnici. Imaju granice, polja i uvlake. Margina polja (margina) - prostor izvan granica elementa. Svojstvo se koristi za određivanje udaljenosti između elemenata i njihovo pozicioniranje na stranici.
Odstupanja
.center {
margin-top: 1em;
}
- za suprotne strane (prvo je navedena vrijednost za vrh i dno, zatim za lijevo, desno);
margina: 1em, 0,5 em;
}
- za tri strane (prva je za rub-vrh, drugi za lijevu i desnu, treća za dno);
.center {
margina: 0em 1,1 em 2em;
}
- za svaku stranu možete odrediti marginu-gornju marginu-desnu ili jednu liniju od gore prema gore lijevo u smjeru kazaljke na satu;
.center {
margina: 0,5 em 1em 1,5 em 2em;
}
- vrijednost elementa margine može biti ista za svaku stranu;
.center {
margina: 1em;
}
- vrijednost zamarža ne može biti specificirana;
- vrijednost marže može biti negativna, na primjer, u CSS-margin-u s negativnom vrijednošću pomiče se element gore;
. Sredina {
margin-top: -1em;
}
- vrijednost negativne margine može biti na svim stranama elementa, a zatim "oslobađa" prostor za okruženje njegovih elemenata odozdo i udesno i "pomiče" u lijevi i gornji element;
.center {
margina: -1em;
}
Negativno povlačenje
Negativno povlačenje često se koristi za promjenu položaja elementa. Kada koristite negativnu marginu, stavka oslobađa prostor za druge kada se kreće. Elementi na koje se primjenjuje svojstvo mogu prijeći druge elemente ili dopustiti drugim elementima da "uđu".
.prva {
pozadinska boja: bijela;
granica: 006 vw solid gold;
kutija-sjena: 000.09 vw zlato;
širina: 50vw;
padding: 2vw;
margin-bottom: -1vw;
margina-lijevo: -9vw;
}
. Druga (-) pozadinska boja: crna;
boja: bijela;
veličina slova: 0.7 rem;
širina: 10vw;
obloga: 0.5 vw;
margina-lijevo: 27vw;
}
Pomoću gornjeg lijevog margina možete "pomicati" stavku lijevo ili gore. Ako se na mjestu gdje se element kreće, već postoje predmeti, onda se oni preklapaju.
Margino-dno i marginalno-desno ne utječu na stanje elementa na koji se primjenjuje, ali za druge objekte postaje manji. Zbog toga na slici blok s imenom autora citira "zaliz" na bloku s citatom.
Auto i nasljeđuje
Korištenje auto u CSS u margini) i poravnavanje teksta s vrijednostima središta imaju sličan učinak. Automobil usmjerava element vodoravno na jednaku udaljenost od granicaspremnik
Utvrđivanjem vrijednosti automatskih elemenata raspoređuju se jedna za drugom bez vanjskih udubljenja (osim ako nije specificirana druga margina) na isti način kao što su na nultoj margini. Nakon pokazivanja, srednja vrijednost se pomiče u središte retka.
.center:
margina: automobil;
}
Korištenje naslijeđene vrijednosti podrazumijeva nasljeđivanje vrijednosti iz roditeljskog elementa. Primjerice, roditeljski element je napisan u CSS margin-left, vrijednost središnjeg elementa je vrijednost dana u prethodnom primjeru.
tijelo {
margina-vrh: 1em;
}
.center {
margina: auto;
}
Roditeljski element, u koji su svi ostali elementi ugrađeni, pomaknuo se malo ispod starog položaja. Ako promijenite marginu na naslijeđenom središtu u središnjem elementu, poravnanje će nestati, a objekt koji naslijedi svojstvo će se pomaknuti dolje na isti način.