box-sizing xüsusiyyəti elementin ölçüsünə necə təsir edir?

CSS box-sizing xüsusiyyəti, elementin ölçülərinin necə hesablandığını müəyyən edir — daxili boşluqlar (padding) və sərhədlər (border) daxil edilirmi və ya yox.

• Dəyər content-box (standart): elementin eni və hündürlüyü yalnız məzmunu müəyyən edir. Daxili boşluqlar və sərhədlər bu ölçülərə əlavə olunur, nəticədə ümumi ölçü artır.

• Dəyər border-box: eni və hündürlüyü məzmun, daxili boşluqlar və sərhədlər daxil edir. Bu, əgər eni 100px təyin etsəniz, məzmun padding və border nəzərə alınaraq kiçildilir ki, ümumi ölçü 100px qalsın.

Misal:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

Bu halda, .box elementinin ümumi eni 200px olacaq, padding və border daxil. Əgər content-box olsaydı, ümumi eni 200 + 210 + 25 = 230px olardı.

border-box istifadəsi çox vaxt düzənləməni sadələşdirir, çünki elementlərin ölçüləri padding və border səbəbindən "dağılmaz".