CSS premoženje: zunanja zamika elementov

Lastnost lastnosti CSS nadzoruje zunanje vdolbine elementa. Če ga uporabljate, lahko nastavite razdaljo med sosednjimi bloki ali premaknete otroško vozlišče iz matične meje. Margine ne sodelujejo v blokskem modelu CSS in ne vnašajo širine in višine elementa.

Sintaksa lastnine

Obstaja skupna lastnost blagovne znamke CSS, s katero lahko naenkrat določite vrednost vseh odsekov in štiri ločene lastnosti za vsako stran:

• margin-levo;
• margin-desno;
• margin-top;
• spodnji rob.

Vrednost indentov lahko določite v slikovnih pikah, relativnih enotah (em, rem) ali odstotkih. V slednjem primeru je za 100% širina matičnega elementa vedno sprejeta tudi za zgornjo in spodnjo stran.

starša {width: 500px; height: 100px;} otroka {margin-left: 10% - / 500px * 10% = 50pxmargin - top: 10% - / 500px * 10% = 50px}

Marža CSS je lahko negativna.

Pri uporabi sintakse skupine morate prenesti od enega do štirih parametrov, pri čemer navedite stranke v pravilnem vrstnem redu.

• Eno: za vse stranke hkrati.
• Dva: za zgornjo in spodnjo stran ter ločeno za stranice.
• Trije: za vrh, strani in dno.
• Štirje: navedite strani v smeri urinega kazalca, začenši z vrha.

element {margin: 20px;} element {margin: 20px 30px;} element {margin: 20px 30px 40px;} element {margin: 20px 30px 40px 50px;}

Algoritmi za vnos

Lastnost znamke CSS ni podedovana in privzeto je nič. Zdi se, da na začetku noben element na strani ne bi imel zunanje podlage, vendar ni. Brskalniki na lastno pobudo določijo oblikovanje številnih oznak, na primer seznamov. Pomembno je, da to upoštevamo pri postavitvi.

Specifikacija definira obnašanje robov za vozlišča z različnimi vrstami kartiranja. Tako linijski elementi prezrejo vrednost zgornje in spodnje luknje, tudi če so izrecno določeni, da ne bi prekinili strukture linije.

Bloki in nizi blokov ustrezno prikazujejo robove na vseh štirih straneh, vendar je v nekaterih primerih obnašanje te lastnosti nepričakovano.

Kolaps marž

Slika prikazuje dva elementa, ki sta nameščeni ena pod drugo, z nastavljenimi zunanjimi nastavki. V prvi varianti sta spodnji in zgornji rob blokov združeni, v drugem - skupaj se doda. Kakšno vedenje se zdi bolj logično?

Blokovni elementi v CSS se obnašajo v skladu s prvim tipom in linijskim blokom ter fleksibilnimi vsebniki - na drugem. V tem primeru se zrušijo le navpične podlage, medtem ko se horizontalne tiste vedno ujemajo.

Odstranjevanje robov iz starševstva

Blokovna vozlišča imajo še eno potezo: v nekaterih primerih se lahko margina otroškega elementa prevaža zunaj nadrejenega kontejnerja. To se zgodi, če indenting element ni ločen od predkodne meje s katerimkoli drugim elementom, besedilnim vozliščem, okvirjem ali oblazinjenjem.

Slika prikazuje otrokov blok, ki je bil zamaknjen v pričakovanju, da se bo odmaknil od zgornje meje nadrejene posode. Namesto tega je bila marža vzeta iz omejitev staršev in jo potisnila od meje starejšega prednika.

Če ima staršev okvir, oblazinjenje ali lastnost prelivanja, ki je enaka skritim ali pomikanjem, se odstopanje robov ne pojavi.

Poravnava centra

Obstaja znan trik, ki vam omogoča, da poravnate blok element v središču staršev s pomočjo zunanjih algoritmov. Če želite to narediti, morate nastaviti širino in nastaviti levo in desno robove na samodejno.

element {širina: 400px; rob: 0 avto-}

V tem primeru na obeh straneh elementa enakomerno prerazporedimo prosti prostor. To deluje samo za vozlišča tipa blokov s posebno širino. Če ne nastavite velikosti, se element bloka razširi na celoten vsebnik in ne pušča prostora za vdiranje.