როგორ ახდენს box-sizing თვისება ელემენტის ზომაზე გავლენას?

CSS box-sizing xossəsi, 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 en 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: en və hündürlük məzmunu, daxili boşluqları və sərhədləri əhatə edir. Bu, əgər en 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, daxil olmaqla padding və border. Ə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".