CSS-də qutu modeli nədir?

CSS-də qutu modeli, bir elementin veb səhifədə tutduğu sahənin necə hesablandığını təsvir edir. O, aşağıdakıları əhatə edir:

• Məzmun: Elementin faktiki məzmunu üçün sahə (mətn, şəkillər).
• Padding (daxili boşluq): Məzmun ilə elementin sərhədi arasında olan boşluq.
• Border (kənarlıq): Padding və məzmunu əhatə edən sərhəd.
• Margin (kənar boşluğu): Elementin sərhədinin ətrafındakı sahə, onu digər elementlərdən ayırır.

Varsayılan olaraq (standart model box-sizing: content-box) elementin ölçüsü məzmun, padding və border-in cəmindən müəyyən edilir. Margin ümumi tutulan sahəyə əlavə olunur, amma elementin öz ölçüsünə təsir etmir.

box-sizing: border-box xüsusiyyəti elementin ölçülərinin hesablanmasını dəyişir və padding ilə border-i ümumi eni və hündürlüyə daxil edir. Bu halda, elementin ölçüsü width/height ilə müəyyən edilir və padding və border "məkanını yeyir".

/* Standart model (varsayılan) */
.element-content-box {
  width: 100px; /* Məzmun ölçüsü */
  padding: 10px;
  border: 5px solid black;
  /* Ümumi eni: 100px (məzmuna) + 10px (padding sol) + 10px (padding sağ) + 5px (border sol) + 5px (border sağ) = 130px */
}

/* border-box modeli */
.element-border-box {
  width: 100px; /* Ümumi eni: məzmun + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Məzmun ölçüsü: 100px - 10px (padding sol) - 10px (padding sağ) - 5px (border sol) - 5px (border sağ) = 70px */
}

Qutu modelini başa düşmək, səhifədə elementləri dəqiq yerləşdirmək və tərtib etmək üçün vacibdir.