U prethodnom poglavlju spomenuli smo takve CSS svojstva, poput margine (polja) i ispune (uvlake). Sada ćemo ih detaljnije pogledati i razmotriti kako se razlikuju jedni od drugih i koje značajke imaju.

Razmake između elemenata možete stvoriti na ovaj ili onaj način, ali ako je padding uvlačenje od sadržaja do ruba bloka, onda je margina udaljenost od jednog bloka do drugog, međublokovni prostor. Snimka zaslona prikazuje jasan primjer:

Padding odvaja sadržaj od granice bloka, a margina stvara praznine između blokova

Kao što možete vidjeti, CSS margine i padding razlikuju se jedni od drugih, iako je ponekad bez gledanja koda nemoguće odrediti koje se svojstvo koristi za postavljanje udaljenosti. To se događa kada nedostaje okvir ili pozadina bloka sadržaja.

Postoje sljedeća svojstva za postavljanje margine ili ispune u CSS-u sa svake strane elementa:

Ispuna:

• gornji dio: značenje;
• padding-desno: značenje;
• padding-bottom: značenje;
• padding-left: značenje;

Polja:

• margin-top: značenje;
• margin-desno: značenje;
• margina-dno: značenje;
• margin-lijevo: značenje;

Vrijednosti se mogu navesti u bilo kojim CSS jedinicama - px, em, %, itd. Primjer: margin-top: 15px .

Postoji i vrlo zgodna stvar poput skraćenica za margine i padding CSS. Ako trebate postaviti margine ili ispune na sve četiri strane elementa, ne morate nužno pisati svojstvo za svaku stranu zasebno. Sve je pojednostavljeno: za marginu i ispunu možete navesti 1, 2, 3 ili 4 vrijednosti odjednom. Broj vrijednosti određuje kako se postavke distribuiraju:

• 4 vrijednosti: ispuna je postavljena za sve strane elementa u sljedećem nizu: gore, desno, dolje, lijevo: ispuna: 2px 4px 5px 10px;
• 3 vrijednosti: padding se postavlja prvo za gornju stranu, zatim istovremeno za lijevu i desnu stranu, a zatim za dno: padding: 3px 6px 9px;
• 2 vrijednosti: ispuna se prvo postavlja istovremeno s gornje i donje strane, a zatim istovremeno s lijeve i desne strane: ispuna: 6px 12px;
• 1 vrijednost: jednaki razmak postavljen je za sve strane elementa: razmak: 3px;

Ista pravila vrijede za CSS svojstvo margine. Imajte na umu da također možete koristiti negativne vrijednosti za marginu (na primjer, -3px), što ponekad može biti vrlo korisno.

Sažmi marginu

Zamislite situaciju: dva elementa bloka nalaze se jedan na drugom i imaju marginalna polja. Gornji blok postavljen je na marginu: 60px, a donji blok na marginu: 30px. Bilo bi logično pretpostaviti da će se dva rubna polja dvaju elemenata jednostavno dodirivati ​​i kao rezultat toga razmak između blokova bit će jednak 90 piksela.

Međutim, stvari stoje drugačije. Zapravo, u takvoj situaciji dolazi do efekta koji se naziva kolaps, kada se iz dva susjedna polja elemenata izabere najveći po veličini. U našem primjeru, konačni razmak između elemenata bit će 60 piksela.

Udaljenost između blokova jednaka je većoj vrijednosti

Sažimanje margine radi samo za gornje i donje margine elemenata i ne odnosi se na margine s desne i lijeve strane. Konačna vrijednost jaza izračunava se različito u različitim situacijama:

• Kada su obje vrijednosti margine pozitivne, rezultirajuća veličina margine bit će jednaka većoj vrijednosti.
• Ako je jedna od vrijednosti negativna, tada za izračun veličine polja trebate dobiti zbroj vrijednosti. Na primjer, s vrijednostima od 20px i -18px veličina polja će biti:
  20 + (-18) = 20 – 18 = 2 piksela.
• Ako su obje vrijednosti negativne, uspoređuju se moduli tih brojeva i bira se broj s većim modulom (dakle, manji od negativnih brojeva). Primjer: trebate usporediti vrijednosti polja -6px i -8px. Moduli brojeva koji se uspoređuju su 6 odnosno 8. Iz toga slijedi da je 6 -8. Rezultirajuća veličina polja je -8 piksela.
• U slučaju kada su vrijednosti navedene u različite jedinice CSS, svode se na jedan, nakon čega se uspoređuju i bira se veća vrijednost.
• Veličina margine za podređene elemente određuje se na još zanimljiviji način: ako dijete ima veću marginu od svog roditelja, tada mu se daje prednost. U tom će slučaju veličine gornje i donje margine roditelja biti iste kao one navedene za dijete. U tom slučaju neće biti udaljenosti između roditelja i djeteta.

Margine i ispuna vrlo su važni stilovi pri izradi HTML stranice. Omogućuju vam točnije postavljanje elemenata, stvaranje okvira s potrebnim prazninama itd. Oba su stila vrlo slična i imaju slične funkcije. Ali ipak postoje razlike.

Elementi mogu biti ugniježđeni ili smješteni jedan pored drugog. Pogledajmo sljedeći primjer:

Imamo dva stola, limun i plavi, koji se nalaze jedan ispod drugog. Tablice se sastoje od jedne ćelije. U prvoj ćeliji tablice nalazi se crveni blok. Koristeći ovaj primjer, pogledajmo kako funkcioniraju margine i uvlake.

Polja su postavljena stilom podstava. Ovaj se stil odnosi samo na elemente spremnika koji mogu sadržavati druge elemente. Stil vam omogućuje da postavite marginu između rubova elementa i njegovog sadržaja. Stil margina omogućuje postavljanje uvlaka od elementa do najbližih granica drugog elementa. Granice drugog elementa mogu biti granice nadređenog spremnika, kao i rubovi same stranice.

Postoji nekoliko načina za postavljanje ovih stilova. Na primjer, izravno navedite veličinu svih margina ili uvlaka s jednim argumentom u nekoj mjernoj jedinici (px, ex, em, pt, cm i tako dalje):

ispuna: 3px; margina: 3px;

U tom će slučaju margine i uvlake biti iste na sve četiri strane. Kada navedete dva argumenta odvojena razmakom:

ispuna: 3px 5px; margina: 3px 5px;

prvi će odrediti količinu margina/uvlaka na vrhu i dnu, drugi - na lijevoj i desnoj strani. Kada se daju tri argumenta:

ispuna: 3px 5px 2px; margina: 3px 5px 2px;

prvi je margina/uvlaka na vrhu, drugi je i lijevo i desno, treći je na dnu. Sa četiri argumenta:

ispuna: 3px 5px 2px 6px; margina : 3px 5px 2px 6px ;

prvi je margina/razmak na vrhu, drugi je desno, treći je dolje, četvrti je lijevo. Lako je zapamtiti: prvi je od vrha, a zatim u smjeru kazaljke na satu. Osim toga, možete zasebno postaviti margine i ispune za određeni rub, koristeći odgovarajuće stilove: padding-top, padding-desno, padding-bottom, padding-lijevo, margin-top, margin-desno, margina-dno, margin-lijevo. Vrijednost ovih stilova može biti samo jedan argument, koji određuje količinu margine/ispune za danu stranu.

Na slici je crveni blok unutar ćelije tablice i uz njezine granice, odnosno ćelija nema rubova. Postavimo margine ćelija koristeći stil:

ispuna: 5px;

Kao rezultat toga, stranica će se promijeniti u sljedeće:

Pogledajmo sada udubljenja. Dvije tablice su jedna uz drugu, ako ih želimo malo razmaknuti, možemo primijeniti uvlake. Ovdje postoje dvije mogućnosti: postaviti donju uvlaku prve tablice ili gornju uvlaku druge tablice. Iskoristimo drugu:

margin-top: 5px;

Imajte na umu da uvlaku postavljamo posebno za tablicu, a ne za ćeliju tablice, kao što je slučaj s poljima. Evo rezultata:

Usput, u prvom slučaju (razmak između crvenog bloka i granica roditeljske ćelije), isti se učinak može postići postavljanjem uvlaka bloka. Općenito, ako nešto nije jasno, javite nam u komentarima.

HTML kôd eksperimentalne stranice:

<html > <glava > <naslov > Test</naslov> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </glava> <tijelo > <stil > tablica (širina: 200px; visina: 150px; obrub: 1px solid #555; border-collapse: collapse) td (vertical-align: top; padding: 0px) div (width: 100px; height: 100px; background: red)</stil> <stil stola = "pozadina: limeta" > <tr > <td style = "padding: 5px" > <div style = "margin: 0px" ></div> </td> </tr> </stol> <stil stola = "pozadina: nebeskoplava; margin-top: 5px"> <tr > <td ></td> </tr> </stol> </tijelo> </html> Padding-top

Nadam se da ste već upoznati sa strukturom bloka. Ako nije, prikazano je u nastavku.

Blok struktura

Tako. Vjerojatno već znate da su margine i margine bloka predstavljene svojstvima padding i margine. A u prošlom članku već smo se djelomično dotakli ove teme. Na ovoj stranici pobliže ćemo pogledati polja ( podstava) i ispuna ( margina ).

Svojstva margine i padding vrlo su slična jedna drugoj i obavljaju slične funkcije, zbog čega se često miješaju. Ali naravno da to ne biste trebali učiniti, jer su margine i uvlake potpuno različite stvari. No, to je jasno vidljivo iz slike, jer nije slučajno što je ovdje prikazana.

Tako. Margine su određene svojstvom padding. To su unutarnje udaljenosti od granica bloka do njegovog sadržaja.

Svojstvo se odnosi na sve elemente.

Udaljenost je navedena u CSS jedinicama duljine, % ili ( zadano

Svojstvo padding je univerzalno jer postavlja margine od obruba elementa do njegovog sadržaja za sve njegove strane, kombinirajući tako svojstva padding-top, padding-right, padding-bottom i padding-left, koja postavljaju širinu margine za svaki bočni element pojedinačno.

Uvlake se postavljaju pomoću svojstva margine, koje određuje udaljenost od granica bloka do najbližih elemenata ili do rubova prozora preglednika.

Svojstvo margine također se odnosi na sve elemente.

Padding je također specificiran u CSS jedinicama duljine, % ili ( zadano) automatski otkriva preglednik.

Svojstvo margine je univerzalno, jer postavlja količinu uvlačenja od rubova elementa za sve njegove strane, kombinirajući tako svojstva margin-top, margin-right, margin-bottom i margin-left, koja postavljaju širinu uvlaka od svake granice elementa pojedinačno.

I još nešto: udubljenja ( margina) nalaze se izvan bloka, dok su margine ( podstava) unutar njega, dakle pozadina bloka ili njega pozadinska slika odnose se samo na margine, a uvlake su uvijek prozirne ili imaju pozadinu glavne ( roditeljski) blok ili pozadinu stranice.

Isječak koda: