Content - sadržaj u kojem se nalazi tekst i ostali elementi unutar boxa
Padding - Razmak između contenta i bordera (može se odabrati padding za svaku stranu posebno, ali i nemora)
Border - linija koja okružuje content i padding
Margin - prazan prostor oko bordera
Dimenzije sadržaja - može se odabrati određena širina i visina za box, također se može i odabrati max/min širina ili visina na bolju optimizaciju
Primjer box modela:
Box
Display: block - koristimo kako bi mijenjali prikaz elemenata na stranici
Display: none - korišteno za skrivanje elemenata na web pregledniku, ali u kodu još uvjijek budu vidljivi
Display: inline - elementi ne gube svoja blok svojstva ali se ponašaju kao da su inline
Display: inline-block - koristimo kada želimo da inline elementi ostanu inline, ali da poprime svojstva blok elementa
Npr. na primjeru box modela sam koristila svojstvo display: block
Primjer inline-block boxa:
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates,
Box
pariatur voluptatem. Blanditiis quam, in nihil temporibus eligendi perferendis? Qui, debitis!Visibility - sličan je display: none, ali je razlika u tome što element idalje zauzima prostor na stranici koji bi zauzeo da je vidljiv