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