box-sizing: content-box və border-box arasındakı fərq nədir?

box-sizing: content-box və box-sizing: border-box arasındakı fərq, brauzerin elementin ümumi ölçüsünü necə hesablamasından ibarətdir:

• content-box (standart dəyər): genişlik və hündürlük yalnız məzmunu göstərir. Bu ölçülərə daxili boşluq (padding) və sərhəd (border) əlavə olunur, bu da elementin ümumi ölçüsünü artırır.

• border-box: genişlik və hündürlük məzmunu, padding və sərhədi əhatə edir. Başqa sözlə, padding və border "daxil olur" təyin olunmuş ölçülərə.

Misal:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* və ya border-box */
}

• content-box ilə ümumi genişlik: 200 + 102 + 52 = 230px.
• border-box ilə ümumi genişlik 200px qalır və məzmun padding və border üçün kiçilir.

border-box istifadə etmək adətən daha əlverişlidir, çünki elementlərin ölçüsü padding və border səbəbindən "şişmir".