CSS-də qutu modeli nədir?

CSS qutb modeli, elementlərin səhifədə necə göstərildiyini təsvir edir və onlar düzbucaqlı bloklar kimi təqdim olunur. Bu model dörd zonadan və ya qatmandan ibarətdir və bunlar bir-birinin üstünə yerləşir, başlanğıcda isə məzmundan başlayır:

Məzmun: Elementin əsl məzmununun yerləşdiyi sahə (mətn, şəkillər və s.). Onun ölçüsü width və height xüsusiyyətləri ilə müəyyən edilir.
Padding (Daxili boşluq): Məzmun və elementin sərhədi arasında şəffaf sahə. Bu, padding-top, padding-right, padding-bottom, padding-left və ya padding qısaldması ilə tənzimlənir.
Sərhəd (Border): Padding və Məzmunu əhatə edən xətt. Onun stili, qalınlığı və rəngi border-width, border-style, border-color və ya border kimi qısaldmalarla müəyyən edilir.
Marjin (Kənar boşluğu): Elementin sərhədinin ətrafındakı şəffaf sahə, onu digər elementlərdən ayırır. Bu, margin-top, margin-right, margin-bottom, margin-left və ya margin xüsusiyyətləri ilə tənzimlənir. Yaxın blokların marjinləri toqquşa bilər.

Standart davranış, box-sizing: content-box (seçimdə) ilə təsvir edilir və bu, width və height xüsusiyyətlərinin yalnız Məzmun üçün olduğunu müəyyən edir. Padding və Border bu ölçüyə əlavə olunur və elementin ümumi ölçüsünü artırır.

box-sizing: border-box istifadə edildikdə, width və height xüsusiyyətləri Məzmunu, Padding və Border-i əhatə edir. Marjin (margin) isə həmişə elementin ümumi ölçüsünə əlavə olunur, box-sizing-dən asılı olmayaraq.

Nümunə:

div {
  width: 100px; /* Məzmunun eni (content-box üçün) və ya bütün elementin eni (border-box üçün) */
  height: 50px; /* Məzmunun hündürlüyü (content-box üçün) və ya bütün elementin hündürlüyü (border-box üçün) */
  padding: 10px; /* Daxili boşluq */
  border: 2px solid black; /* Sərhəd */
  margin: 15px; /* Xarici kənar boşluğu */
}

box-sizing dəyərinə görə, elementin real ölçüləri fərqli olacaq.

box-sizing: content-box: Əsl eni = 100px (Məzmun) + 10px (Padding sol) + 10px (Padding sağ) + 2px (Border sol) + 2px (Border sağ) = 124px. Əsl hündürlük = 50px (Məzmun) + 10px (Padding yuxarı) + 10px (Padding aşağı) + 2px (Border yuxarı) + 2px (Border aşağı) = 74px.
box-sizing: border-box: Əsl eni = 100px (Məzmun + Padding + Border). Əsl hündürlüyü = 50px (Məzmun + Padding + Border).

Xarici marjin margin: 15px bu ümumi ölçüyə əlavə olunur.