box-sizing xususiyati elementning o'lchamiga qanday ta'sir qiladi?

CSS box-sizing xossasi, elementning o'lchamini qanday hisoblashni belgilaydi — ichki bo'shliq (padding) va chegaralar (border) hisobga olinadimi yoki yo'qmi.

• content-box qiymati (standart): elementning kengligi va balandligi faqat mazmunni belgilaydi. Ichki bo'shliq va chegaralar bu o'lchamlarga qo'shiladi, natijada elementning umumiy o'lchami oshadi.

• border-box qiymati: kenglik va balandlik mazmun, ichki bo'shliq va chegaralarni o'z ichiga oladi. Bu shuni anglatadiki, agar kenglik 100px deb belgilansa, mazmun padding va border hisobga olinib qisqartiriladi, shunda umumiy o'lcham 100px qoladi.

Misol:

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

Bu holatda, .box elementining umumiy kengligi 200px bo'ladi, padding va border bilan. Agar content-box bo'lsa, umumiy kenglik 200 + 210 + 25 = 230px bo'ladi.

border-boxdan foydalanish odatda tartibni soddalashtiradi, chunki elementlarning o'lchamlari padding va border sababli "tarqalib" ketmaydi.