CSS veličina kutije - box-sizing

Model kutije opisuje svaki blok element. On se sastoji od sadržaja, odmaka (engl. padding), obruba (engl. border) i rubnice (engl. margin). Pogledajte sliku 1.

Na način prikaza blok elementa utječu i css svojstva širina i visina (engl. width & height), veličina kutije (engl. box-sizing) i prelijev (engl overflow).

Vrijednost svojstva box-sizing određuje granicu koju obuhvaćaju css svojstva width i height. Zadana (engl. default) vrijednost ovog css svojstva je content-box. Ona kazuje da veličine odmaka (engl. padding) i obruba (engl. border) nisu uključene unutar vrijednosti dodijeljenih css svojstvima width i height.

Css svojstvo box-sizing

Css svojstvo box-sizing određuje css svojstva, koja su uključena unutar širine (css svojstvo width) i visine (css svojstvo height). Css svojstvo box-sizing može imati tri vrijednosti:

content-box (zadano)

padding-box

border-box

a) vrijednost content-box

Za ovu vrijednost svojstva box-sizing, css svojstvo width, uključuje samo širinu sadržaja (engl. content), a css svojstvo height uključuje samo visinu sadržaja (engl. content).

Stvarnu širinu html elementa računamo kao zbroj vrijednosti css svojstva width, širina lijevog i desnog odmaka (engl. padding), lijevog i desnog obruba (engl. border) i lijeve i desne rubnice (engl. margin).

Slično tome stvarnu visinu html elementa računamo kao zbroj vrijednosti css svojstva height, visina gornjeg i donjeg odmaka (engl. padding), gornjeg i donjeg obruba (engl. border) i gornje i donje rubnice (engl. margin).

b) vrijednost padding-box

Za ovu vrijednost svojstva box-sizing, css svojstvo width, uključuje širinu sadržaja (engl. content) i širinu lijevog i desnog odmaka (engl. padding).

Css svojstvo height, uključuje visinu sadržaja (engl. content) i visinu gornjeg i donjeg odmaka (engl. padding).

Stvarnu širinu html elementa računamo kao zbroj vrijednosti css svojstva width, širina lijevog i desnog obruba (engl. border) i lijeve i desne rubnice (engl. margin).

Slično tome stvarnu visinu html elementa računamo kao zbroj vrijednosti css svojstva height, visine gornjeg i donjeg obruba (engl. border) i gornje i donje rubnice (engl. margin).

c) vrijednost border-box

Za ovu vrijednost svojstva box-sizing, css svojstvo width, uključuje širinu sadržaja (engl. content) te širinu lijevog i desnog odmaka (engl. padding) i lijevog i desnog obruba (engl. border)

Css svojstvo height, uključuje visinu sadržaja te visinu gornjeg i donjeg odmaka (engl. padding) i gornjeg i donjeg obruba (border).

Stvarnu širinu html elementa računamo kao zbroj vrijednosti css svojstva width te širine lijeve i desne rubnice (engl. margin).

Slično tome stvarnu visinu html elementa računamo kao zbroj vrijednosti css svojstva height te visina gornje i donje rubnice (engl. margin).

Možda će vas zanimati?