Mogućnost CSS margine: vanjski uvlačenje elemenata

Svojstvo CSS margine kontrolira vanjske uvlačenje elementa. Pomoću njega možete postaviti udaljenost između susjednih blokova ili premjestiti dječji čvor iz roditeljske granice. Margine ne sudjeluju u blok modelu CSS-a i ne unosite širinu i visinu elementa.

Sintaksa nekretnine

Postoji zajednička imovina margine CSS, s kojom možete odrediti vrijednost svih uvlake odjednom, kao i četiri zasebna svojstva za svaku stranu:

• margin lijevi;
• margin-right;
• margin-top;
• margin dna.

Možete utvrditi vrijednost udubljenja u pikselima, relativnim jedinicama (em, rem) ili postotcima. U potonjem slučaju, za 100%, širina roditeljskog elementa uvijek će biti prihvaćena, čak i za gornju i donju stranu.

{500px * 10% = 50px * 10% = 50pxmargin-top: 10% - {500px; visina: 100px;} dijete {margina:

Margina CSS-a može biti negativna.

Kada koristite skupinu sintakse, morate prenijeti jedan do četiri parametra, navodeći stranke u ispravnom redoslijedu.

• Jedan: za sve stranke odjednom.
• Dva: za gornji i donji dio i zasebno za strane.
• Tri: za vrh, strane i dno.
• Četiri: nabrojati strane u smjeru kazaljke na satu, počevši od vrha.

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

Algoritmi za uvlačenje

Svojstvo CSS margine nije naslijeđeno i prema zadanim je postavkama nužno. Čini se da u početku nikakav element na stranici ne bi trebao imati vanjske uvlake, ali to nije. Preglednici na vlastitu inicijativu postavljaju oblikovanje za brojne oznake, na primjer, popise. Važno je uzeti u obzir prilikom izrade izgleda.

Specifikacija definira ponašanje margina za čvorove s različitim vrstama mapiranja. Stoga elementi linije zanemaruju vrijednost gornje i donje uvlake, čak i ako su izričito navedeni tako da ne prekidaju strukturu crte.

Blokovi i blokovi s nizom odgovarajuće prikazuju margine na sve četiri strane, ali u nekim slučajevima ponašanje ove imovine može biti neočekivano.

Propadanje margina

Slika prikazuje dva elementa koji se nalaze jedan ispod drugog s postavljenim vanjskim uvlačenjem. U prvoj varijanti, donja i gornja margina blokova se kombiniraju, u drugom - one se dodaju zajedno. Kakva vrsta ponašanja izgleda logičnija?

Elementi blokiranja u CSS ponašaju se prema prvom tipu, i line-block i flex-kontejneri - na drugom. U tom slučaju samo se okomite zavoje urušavaju, dok se horizontalni uvijek zbrajaju.

Uklanjanje margine iz roditeljstva

Blokovi čvorova imaju još jedan znak: u nekim se slučajevima marginal elementa djeteta može izvesti izvan roditeljskog spremnika. To se događa ako element uvlačenja nije odvojen od granice predaka bilo kojeg drugog elementa, teksta čvora, okvira ili padanja.

Na slici je prikazan dječji blok koji je bio razveden u očekivanju da će se odmaknuti od gornje granice roditeljskog spremnika. Umjesto toga, margina je izvađena iz granica roditelja i gurnula je s granice starijeg pretka.

Ako roditelj ima okvir, padding ili svojstvo preljeva koji je jednak skrivenom ili pomicanjem, nema uklanjanja margina.

Usmjerenje središta

Postoji poznati trik koji vam omogućuje da poravnate blok element u središtu roditelja uz pomoć vanjskih uvlakača. Da biste to učinili, trebate postaviti širinu i postaviti lijevu i desnu marginu na automatsko.

element {širina: 400px; margina: 0 auto-}

U ovom slučaju, redistribucija slobodnog prostora jednako je na obje strane elementa. To funkcionira samo za blokove čvorova s ​​određenom širinom. Ako ne postavite veličinu, blok element proteže se na cijeli spremnik i ne ostavlja mjesta za uvlačenje.