Pojam i definicija

box model

Svi HTML elementi su kutije (eng. box), uključujući i span tag. Kutija kao pojam u front-end-u se razlikuje od pojama kutije iz života.
Dimezija kutije po W3C se dobija sabiranjem
dimenzija sledećih elemenata:

  • sadržaj box-a (ima svoju visinu i širinu)
  • padding
  • border

Margina ne ulazi u veličinu box-a, ona razdvaja boxove. Ukoliko se explicitno ne definiše širina box-a, onda box zauzima 100% roditeljskog elementa.

Za igranje sa box modelom i dobijanje krajnje veličine možete posetiti stranicu.


Box properties

Box model ima svoje osobine (properties):

  • za veličinu box-a: height, width, max-height, max-width, min-height, min-width
  • margin i padding
  • extra osobine: box-sizing, overflow, box-shadow, visibility

Border-box

Ukoliko želimo da model kutije više liči na kutiju iz svakodnevnog života koristi se CSS svojstvo: box-sizing: border-box

See the Pen Box Model Reset by Web programiranje (@chos) on
CodePen.


Overflow

Ovo svojstvo box-a se bavi prikazivanjem sadržajem ukoliko je sadržaj veći od kontejnera u kome se nalazi. Default-na vrednost osobine je visible, koja omogućava sadržaju da se prikaže i preko granica kontejnera. Na sledećem primeru kontejner je fiksne širine i visine
(zeleni) i sadrži dva elementa koja su veća od njega, dok mu je osobina overflow setovana na defaultnu vrednost visible.

See the Pen overflow1 by Web programiranje (@chos) on CodePen.

Na sledećem primeru je promenjena vrednost osobine overflow na scroll. Kontejner sada prikazuje samo sadržaj u okviru njegovih granica ali je dodat skrol koji omogučuje pregled celokupnog sadržaja. Ova osobina uvek prikazuje skrol dok osobina auto
samo ako ima potrebe.

See the Pen overflow2 by Web programiranje (@chos) on CodePen.

Kada je vrednost osobine overflow setovana na hidden vidljiv je samo deo sadržaja koliko to veličina kontejnera dopušta.

Box-shadow

Ova osobina box-a pravi senku, za spolju senku prihvata četri argumenta dak je za unutrašnju senku potrebno pet argumenata (dodaje se na početku argument inset). Prvi argument definiše koliko je senka smaknuta u odnosu na box u X-pravcu, dok drugi
element
definiše isto to ali u Y-pravcu. Treći argument definiše vrednost blur-a, dok četvrti element definiše za koliko je pixela senka manja ili veća od box-a. Sve vrednosti argumenata su u pixelima.

Moguće je na jednom elementu definisati više senki, jednostavnim nadovezivanjem setova argumenata koji su odvojeni zarezom.

See the Pen PGqzEy by Web programiranje (@chos) on CodePen.

Odličan box-shadow generator možete pogledati ovde.

Visibility

Ova osobina može da ima jedno od tri vrednosti:

  • visibility: visible (defaultna vrednost)
  • visibility: hidden (ne prikazuje dati element ali zadržava mesto koje bi okupiralo da je vidljivo, što je i glavna razlika u odnosu na CSS svojstvo “display: none”koja ne okupira nikakvu površinu.
  • visibility: collapse (koristi se samo kod tabela (za uklanjanje kolona i vrsta) stim što ne okupira nikakvu površinu. Ukoliko primenimo osobinu collapse na nekom drugom elementu koji nije tabela, onda se ponaša kao osobina hidden.)

Specifičnost top/bottom margina

Top margine box elementa imaju svoje “bubice” tj. u nekim specijalnim slučejevima se ne ponašaju onako kako se od njih očekuje. Problem se javlja kada se margine dva elementa (dva susedna ili roditelj-dete) dodiruju.

Kolaps top/bottom margine susednih elemenata

Ukoliko se margine dva susedna elementa dodiruju ne dolazi do sabiranja margina nego se margine preklapaju, nakon čega se uzima veća margina.

U ovom primeru se vidi samo donja margina gornjeg box-a jer ona najveća 30px, dok gornja margina donjeg elementa od 15px i dalje postoji ali je preklopila veća.

See the Pen Box model 4 by Web programiranje (@chos) on CodePen.

Kolaps top/bottom margine izmadju roditelja i deteta

Ukoliko se margine elementa i njegovog roditelja “dodiruju” tj. kada roditelj nema border ili padding koji bi stajao izmedju margine deteta i roditeljske margine, doći će do brisanja top/bottom margine (eng. “collapsing margin”) izmedju njega i
roditelja. Medjutim te margine nisu u potpunosti nestale nego su pomerene na sledeći element tj. postaju top/bottom margine roditeljskog elementa. Sva pravila pomenuta u prethodnom odeljku (“Kolaps top/bottom margine susednih elemenata”) važe i za ove margine.

Na sledećem primeru se vidi da iako je top/bottom margina setovana na 30px, to nije primenjeno izmadju našeg elementa i njegovog roditeljskog elementa, već izmedju roditeljskog i njegovog spoljnog elementa.

See the Pen box5 by Web programiranje (@chos) on CodePen.

Medjutim ako se margine deteta i roditelja ne dodiruju tj. ako roditelj ima border kao u sledećem primeru, ne dolazi do kolapsa top/bottom margina:

See the Pen Box Model 3 by Web programiranje (@chos) on CodePen.

Prevazilaženje problema margina

Problemi sa top/bottom marginama se mogu rešiti na više načina:

  • sprečavanjem dodirivanja dve top/bottom margine sa dodavanjem minimalnog paddinga ili border-a (npr. 1px)
  • definisanje osobine overflow drugačije od default vrednosti kao što je: overflow: auto ili overflow: hidden

Takodje je poznato da se kolaps top/bottom margina se NE DEŠAVA kod elemenata sa osobinama:

  • float
  • position: absolute
  • display: inline-block
Podelite:

Ostavite komentar