Vrednost marže in zmožnosti v CSS

Magrin CSS nadzoruje vdolbino elementov. Elementi v html so pravokotniki. Imajo meje, robove in oblazinjenje.

Območje robov je prostor zunaj meja elementa. Lastnost se uporablja za nastavljanje razdalje med elementi in njihovo pozicioniranje na strani.

Vdolbina

Lastnost Margina v CSS-ju lahko nastavite na%, px, vh / vw, em in rem. Vrednost margina se lahko podeduje od nadrejenega elementa (podeduje) ali samodejno izračuna brskalnik (avto). Vrednosti za Margino v CSS-ju lahko razdelimo na več načinov (primeri so podani v enotah, ki jih je mogoče razširiti, odvisno od velikosti pisave elementa).

Načini za nastavitev vrednosti za zamik:

• za vsako stran (zgoraj, desno, spodaj, levo) elementa (na primer je navedena vrednost zgornjega zunanjega alineja od roba osrednjega elementa);

 .center {margin-top: 1em;} 

• za nasprotne strani (najprej vrednosti za zgornji in spodnji del, nato za levo in desno);

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

• za tri strani (vrednost za zgornjo mejo je označena prva, druga za levo in desno, tretja za dno);

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

• za vsako stran lahko izmenično določite vrednosti (rob-top, margin-right, itd.) ali v eni vrstici od zgoraj navzgor;

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

• vrednost robnega elementa je lahko enaka za vsako stran;

 .center {margin: 1em;} 

• vrednost marže morda ni nastavljena;

• vrednost kritja je lahko negativna, na primer v CSS, rob rob z negativno vrednostjo premakne element navzgor;

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

• vse strani elementa imajo lahko negativno vrednost margine in potem "sprostijo" prostor za svoje okoliške elemente od spodaj in od desne in "zadenejo" levi in ​​zgornji element;

 .center {margin: -1em;} 

Negativna alinea

Negativne zamik se pogosto uporabljajo za premestitev elementa. Če uporabljate negativno robno črto, ta element med selitvijo sprošča prostor za druge. Elementi, ki imajo uporabljeno lastnost, se lahko sekata z drugimi elementi ali pa drugim elementom dovolijo, da sami "preganjajo".

 .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;} 

S pomočjo negativnega margina levo in margin-top lahko element premaknete levo ali navzgor. Če na mestu, kjer se premika element, že obstajajo predmeti, se jih prekriva.

Margina-bottom in margin-right ne vplivata na položaj elementa, na katerega se nanašata, za druge objekte pa postane manjši. Zahvaljujoč temu, se je na sliki blok z imenom avtorja citata povzpel na blok s citatom.

Samodejno in podeduj

Podoben učinek ima uporaba avta v CSS za rob in poravnavo besedila s sredinsko vrednostjo. Samodejno centrira element vodoravno na enaki razdalji od robov vsebnika.

Preden določite avtomatsko vrednost, so elementi razporejeni eden za drugim brez zunanjih zamikov (razen če je določena druga maržna vrednost) na enak način, kot so urejeni z ničelno maržo. Ko podate srednjo vrednost, se premakne v središče vrstice.

 .center {margin: auto;} 

Uporaba dedne vrednosti pomeni podedovanje vrednosti iz nadrejenega elementa. Recimo, da ima nadrejeni element vrednost v levem robu CSS, ima sredinski element vrednost, podano v prejšnjem primeru.

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

Nadrejeni element, v katerega so vdelani vsi drugi elementi, se je premaknil nekoliko nižje glede na svoj stari položaj. Če spremenite mejno vrednost sredinskega elementa v podedovano, bo rezultat centriranje izginil in objekt, ki podeduje lastnost, se bo na enak način pomaknil navzdol.

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

Uporaba CSS-ja v telesu Margin lahko vodi do zamika. Običajno telo nastavi mejo na nič in po potrebi se uporablja oblazinjenje za alinee iz elementov.

Sosednje postavke

Zaradi dejstva, da zunanja alineja dejansko ni del samega elementa, pogosto ne delujejo povsem točno tako, kot bi se predpostavljalo pod vplivom drugih predmetov. Primer tega učinka je učinek zamakanja.

Recimo, da obstajata dva elementa, ki se nahajata ena pod drugo, da imata ničelne robove. Če dodate eno od teh robov, ki ni ničelna marža, lahko vidite, kako se ena premakne glede na drugi element. Če drugemu elementu predpišemo podobno vrednost, vidimo, da se v njem pojavijo zunanji alinei (premakne se desno od starega položaja), razdalja med njima pa se ne poveča, čeprav so poravnani vzdolž vodoravne črte.

 .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;} 

Podoben učinek boste opazili, če nastavite različne robove za dva elementa. Zmaga vrednost večjega roba, ta vrednost je enaka razdalji med elementi.

 .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;} 

Ugnezdeni predmeti

Margina ne deluje pravilno z ugnezdenimi vgrajenimi elementi. Če je zgornja alineja predpisana za starševski in podrejeni element, potem bo delovalo samo eno.

 .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;} 

Na sliki so prikazani primeri obnašanja elementov in ko so vrednosti robov nadrejenega in podrejenega elementa različne. Kot lahko vidite, če ima otrok največjo vrednost, kot je nadrejena, se starš premakne natančno glede na vrednost, podano za otroka.

 .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;} 

Podoben učinek opazimo v vedenju zamika, ko je višina matičnega avto elementa nastavljena na spodnjo zamik nadrejenega in podrejenega elementa. V tem primeru se ohrani tudi prioriteta večje alineje.

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

Prazni elementi bodo zrušili zgornji in spodnji rob. In formalno bodo obstajali, objekt se bo povečal, v resnici pa bodo na elemente poleg njega vplivala le ena vrednost.

 .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;} 

Izjeme in pravila

V številnih primerih dodajanje dodatnih lastnosti elementu omogoča, da se izogne ​​pojavu porušitve. Izginotje kolapsnega učinka je posledica dejstva, da alinee obeh elementov prenehata povsem dotikati.

Težavam zrušitve med starševskimi in podrejenimi elementi se je mogoče izogniti samo z vstavljanjem nečesa med njimi, na primer z dodajanjem obrobe podrejenemu elementu. Da ne bi prišlo do porušitve med sosednjimi objekti, je bolje določiti mejo v eni smeri.

Nekatera splošna pravila za uporabo marže:

• bolje je pisati alineje v eno smer za vse elemente (desno in dol);
• nastajanje razdalje med elementi se ne bi smelo pojaviti na račun otroških elementov;
• vdolbina otroka znotraj staršev iz meja staršev je predpisana z uporabo oblazinjenja staršev, ne pa z robom otroka.

Margina v CSS je ena od lastnosti elementa, ki vam omogoča, da nadzirate njegovo lokacijo na strani glede na druge objekte. Lastnost ima štiri različice, ki omogočajo vodoravno in navpično spreminjanje položaja elementa. Eden od problemov uporabe marže je zrušitev alinej (združitev dveh alinej v eno).