CSS Box-sizing

U prethodnom članku koji pokriva CSS teme govorili smo o box modelu. Važno svojstvo koje je povezano sa modelom box je svojstvo box-sizing.

Svojstvo box-sizing definiše kako se izračunavaju visina i širina elementa i da li treba da sadrži ivicu, obloge i margine ili ne.

Vrednosti

Postoje dve moguće vrednosti za svojstvo veličine kutije:

Content-box - podrazumevana vrednost.
Border-box.

Pogledajmo kako se izračunava širina u oba slučaja.

Da podsetimo, model kutije izgleda ovako:

Content-box

Podrazumevana vrednost svojstva box-sizing je content-box. Objasnićemo kako se u ovom slučaju izračunava širina.

Iako smo postavili širinu našeg elementa na 200 piksela, stvarna širina će biti mnogo drugačija. Formula je:

Width = left margin + left border + left padding + content + right padding + right border + right margin

Dakle, u slučaju našeg primera širina bi bila:

Width = 20px + 3px + 10px + 200px + 10px + 3px + 20px

Rezultat ovog proračuna je 266px. Ovo verovatno nije rezultat koji ste očekivali, je li tako? Zbog toga treba biti zaista oprezan u vezi sa ovim.

Sada se verovatno pitate postoji li lakši način da se nosite sa širinom, nego da svaki put koristite kalkulator? Postoji! Korišćenjem border-box-a.

Border-Box

Uzmimo naš primer. Odredili smo širinu elementa od 200 piksela, a dodatak je 10 piksela sa svake strane. Ako bismo koristili kutiju sa sadržajem, ona postaje 220 piksela.

Ali, kada koristite border-box, širina će biti 200px, što znači da će širina sadržaja biti 180px, a dodavanje 20px. Sadržaj se smanjuje u veličini kako bi se prilagodio dodavanju padding-a.

Primer

Pogledajmo vizuelni primer obe situacije da bismo bolje objasnili svojstva.

HTML

<div class=”content-box”>Content-box</div>
<div class=”border-box”>Border-box</div>

CSS

div {
  height: 200px;
  width: 200px;
  background-color: hotpink;
  color: #fff;
  padding: 10px;
  border: solid 3px black;
  margin: 20px;
}

.content-box {
  box-sizing: content-box
}

.border-box {
  box-sizing: border-box;
}

Kao što vidimo, u prvom primeru content-box dodaje do 266 piksela, dok border-box dodaje do 200 piksela.

Zaključak

Videli smo vezu između svojstva box-sizing i box-model, i ona je važna.Od velike je vrednosti razumeti vrednost content-box i border-box svojstva box-sizing. Iako je content-box podrazumevana vrednost, mnogo je lakše koristiti svojstvo border-box kako bi se izbegle kalkulacije koje su često zbunjujuće.

Srećno kodiranje!