რა არის box model CSS-ში?

CSS-ში ერთ-ერთი ყველაზე საჭირო კონცეპტი არის Box model, დღევანდელ გაკვეთილში განვიხილავთ თუ როგორ მუშაობს ის.

წარმოვიდგინოთ, რომ CSS-ში გვაქვს ელემენტი, რომლის ზომაც არის 100px X 100px-ზე და ასევე ამ ელემენტს აქვს 10 პიქსელიანი ჩარჩო (border) და ასევე 20 პიქსელიანი (padding)

კოდის მაგალითი

div {
  widht: 100px;
  height: 100px;
  border: 10px solid red;
  padding: 20px;
}

ამ შემთხვევაში თუ დავაკვირდებით ჩვენი div ელემენტი რეალურად გაიზრდება ზომებში და 100 პიქსელს დაემატება 10 პიქსელი ყველა მხრიდან ხოლო (padding) 20 პიქსელი ყველა მხრიდან რაც გამოიწვევს ჩვენი ელემენტის გაზრდას, რომელიც ჯამურად გახდება 100px+10px+10px+20px+20px=160px

მსგავს ქცევას იწვევს ელემენტების ე.წ. default (საწყისი მნიშვნელობები) კონკრეტულად box-sizing: content-box;

იმისთვის, რომ ელემენტმა გარშემო არ მოიმიმატოს ჩარჩოს და padding-ის ზომები აუცილებელია box-sizing: content-box; -ის მნიშნველობა შევცვალოთ border-box-ზე

ბოქს მოდელის (box model)-ის ვიზუალური გამოსახვა