box-sizing: content-box va border-box o'rtasidagi farq nima?

box-sizing: content-box va box-sizing: border-box o'rtasidagi farq, brauzer qanday qilib elementning umumiy o'lchamini hisoblayotganiga bog'liq:

• content-box (standart qiymat): kengligi va balandligi faqat mazmunni belgilaydi. Bu o'lchamlarga ichki bo'shliq (padding) va chegaralar (border) qo'shiladi, bu esa elementning yakuniy o'lchamini oshiradi.

• border-box: kengligi va balandligi mazmun, padding va borderni o'z ichiga oladi. Boshqacha qilib aytganda, padding va border "joylashadi" belgilangan o'lchamlarga.

Misol:

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

• content-box bilan umumiy kenglik: 200 + 102 + 52 = 230px.
• border-box bilan umumiy kenglik 200px qoladi va mazmun padding va border uchun qisqartiriladi.

border-boxdan foydalanish odatda qulayroq, chunki elementlarning o'lchamlari padding va border sababli "kattalashmaydi".