CSS - Box Model

Box model definiše način na koji se prostor oko HTML elemenata tretira i kako se određuje krajnji izgled elemenata na web stranici. Razumijevanje box modela je ključno za efikasno upravljanje prostorom i izgledom. Značajan je jer omogućava developerima da definišu prostor oko elemenata, uključujući marginu, padding i border, što utiče na raspored i izgled elemenata na web stranici.

Display

Svaki selektor u css-u ima svojstvo display koje je podrazumijevano povezano sa njim. Ovo svojstvo može imati sledeće vrijednosti:

• inline čini da se svaka oznaka ponaša kao tekst. Elementi zauzimaju prostor koji im je potreban, zatim se pored njega postavlja drugi element i tako dalje. U ovom slučaju pretraživač će odrediti visinu, širinu, padding, marginu itd.

• block otvara mogućnosti kontrole širine, visine, paddinga, margine itd. Ova vrijednost označava da element zauzima cijelu dostupnu širinu. Druge komponente se ne mogu dodati sa strana.

• inline-block je ukrštanje prethodna dva. To će omogućiti da se element ponaša kao inline ali uz mogućnst kontrole širine, visine i drugih parametara.

• flex i inline-flex su vrednosti bloka koje su identične, ali postoje dodatne opcije za manipulisanje postavljanjem djelova unutar nadređene komponente.

• grid i inline-grid su složeniji modeli koji omogućavaju dodatnu manipulaciju elementima unutar nadređene oznake.

• table transformiše element u tabelu. Obično je poželjno koristiti oznaku <table>.

Margina, Padding, Ivica, Širina i Visina

1. Margina se odnosi na prostor izvan elementa, odnosno na prostor između elemenata. To je dio elementa koji se nalazi poslije ivice. Margine su uvek prozirne, što znači da nemaju boju pozadine. Donja i gornja margina dva susjedna elementa će se spojiti, tako da se veličine margina neće zbrojiti, već će se preklopiti, a ako je jedna vrijednost veća od druge, prostor između dva elementa će imati veću vrijednost margine. Vrijednosti lijeve i desne margine nijesu isprepletene, ali se obije uzimaju u obzir u konačnom proračunu.

.containerOne {
  /* margin: margin-top margin-right margin-bottom margin-left; */
  margin: 5px 10px 5px 10px;
}
 
.containerTwo {
  /* margin: [margin-top & margin-bottom] [margin-right & margin-left] */
  margin: 5px 10px;
}
 
.containerThree {
  /* margin: jedna jedinica mjere za svaki aspekt margine */
  margin: 10px;
}

2. Padding se nalazi unutar ivica elementa, odnosno između sadržaja elementa i ivice. Elementi podrazumijevano nemaju vrijednost padding, stoga ako se koristi ivica, potrebno je definisati i padding. Boja paddinga poklapa se sa bojom pozadine sadržaja elementa.

div {
  /* padding: padding-top padding-right padding-bottom padding-left; */
  padding: 5px 10px 5px 10px;
}
 
div {
  /* padding: [padding-top & padding-bottom] [padding-right & padding-left] */
  padding: 5px 10px;
}
 
div {
  /* padding: jedna mjera za sva svojstva paddinga. */
  padding: 10px;
}

3. Border se odnosi na označenu granicu elementa. Treba je definisati po potrebi.

4. Width se odnosi na širinu elementa. Kako se računa totalna širina elementa:

total-width = left-border + left-padding + content-width + right-padding + right-border

5. Height se odnosi na visinu elementa.

* {
  /* box-sizing određuje način na koji se ukupna širina elementa izračunava. Konkretno kod border-box širina i visina uključuju sadržaj, padding i ivicu elementa, što čini upravljanje dimenzijame elementa jednostavnijim */
  box-sizing: border-box;
}
.className {
  margin: 10px;
  padding: 5px;
  border: 1px solid black;
  width: 200px;
  height: 300px;
}