Vrijednost i mogućnosti marže u CSS-u

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

Svojstvo Margine u CSS-u može imati vrijednosti%, px, vh /vw, em i rem. Vrijednost Margin može se naslijediti od roditelja (naslijediti) ili automatski izračunati od strane preglednika (auto). Vrijednosti za Margin u CSS-u mogu se pisati na mnogo načina (primjeri su dani u em-skaliranim jedinicama, ovisno o veličini fonta elementa). Načini određivanja vrijednosti ili umetaka:
  • za svaku stranu (gore, desno, dno, lijevo) elementa (na primjer, određena je vrijednost gornjeg vanjskog uvlaka od ruba središnjeg elementa);


  • .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.



    Povezane publikacije