skip to Main Content

Pri postavljanju dokumenta, mehanizam za prikazivanje pretraživača predstavlja svaki element kao pravougaoni okvir u skladu sa standardnim CSS osnovnim modelom okvira. CSS određuje veličinu, položaj i svojstva (boja, pozadina, visina itd.).

Svako polje sastoji se od četiri dela (ili područja), definisanih njihovim odgovarajućim granicama:

  • Sadržaj
  • Padding
  • Border
  • Margin

 

CSS box model

Box model je područje sadržaja, ograničeno ivicom sadržaja, sadrži „stvarni“ sadržaj elementa, kao što su tekst, slika ili video plejer. Njegove dimenzije su širina sadržaja (ili širina okvira sa sadržajem) i visina sadržaja (ili visina okvira sa sadržajem). Često ima boju pozadine ili pozadinsku sliku

Ako je svojstvo box-sizing postavljeno na content-blok (podrazumevano) i ako je element blok element (div, paragrapf), veličina područja sadržaja može se eksplicitno definisati širinom (width), minimalnom-širinom (min-width), maksimalnom-širinom (max-width), visinom (height), minimalno-visinom (min-height), i svojstvom maksimalne visine (max-height).

Područje padding-a, ograničeno ivicom padding-a, proširuje područje sadržaja tako da uključuje i ivice elementa. Njegove dimenzije su širina kutije za padding i visina kutije za padding.

Širinu padding-a odredjuju se CSS svojstva kao što su padding-top, padding-bottom, padding-left, padding-right. Takodje možemo postaviti i samo padding svojstvo i tu dati sve četri osobine padding-a ili staviti samo jednu što će se odraziti na sve četiri veličine padding-a.

Granično područje (border), ograničeno rubnom ivicom, prostire se na podloženo područje tako da obuhvata i obrube elementa. Njegove dimenzije su širina okvira i visina okvira.

Debljina granica (border-a) određena je svojstvima border-width ili jedinstveno border. Ako je svojstvo veličine okvira postavljeno na border-box, veličina graničnog područja može se izričito definisati svojstvima width, min-width, max-width, height, min-heigth i max-height. Kada je na polju postavljena pozadina (boja pozadine ili slika pozadine), ona se proteže do spoljne ivice obruba (tj. proteže se ispod obruba u z-redosledu). Ovo podrazumevano ponašanje može se promeniti sa svojstvom CSS background-clip.

Oblast margine, ograničena ivicom margine, proširuje granično područje tako da uključuje prazno područje koje se koristi za odvajanje elementa od suseda. Njegove dimenzije su širina margin-box-a i visina margin-box-a.

Veličina površine margine određena je svojstvima margine-top, margin-right, margin-bottom, margin-left ili samo  margin. Kada dođe do kolapsa margine, područje margine nije jasno definisano, jer se margine dele između okvira.

 

Izgled CSS box modela

Elementu koji je u ovom slučaju div dali smo klasu test i ona sadrži sledeće osobine:

.test{
width:300px;
height:300px;
padding:300px;
margin:20px;
border:3px solid red;
}

Uvod u CSS osnovni box model

Kao što možemo da vidimo na gornjoj slici dali smo primer box modela gde plavi deo predstavlja sadržaj elementa, zeleni deo predstavlja padding, crveni deo koji se oslanja na padding predstavlja border elementa i narandžasti prestavlja marginu ili ti udaljavanje od susednih elemenata.

Box model možete posmatrati kao kuću sa dvorištem gde bi razmak od ograde do kuće predstavljao padding, ograda bi predstavljala border , razmak izmedju vaše ograde i komšijine bi predstavljalo marginu.

Ovo je osnova svakog CSS box modela i  njegovog poznavanja.

Na kraju, imajte na umu da se za nezamenjene umetnute elemente zauzeta količina prostora (doprinos visini linije) određuje svojstvom line-height, iako su ivice i dodaci i dalje prikazani oko sadržaja.

 

Za još vesti i interesantnih priča iz digitalnog marketinga posetite našu blog stranu ili zapratite naš Instagram profil.

Uvod u CSS osnovni box model

Made by Miloš Stojanović – Senior Web Developer @Digitizer