CSSda quti modeli nima?

CSS'da quti modeli har bir element uchun yaratiladigan to'rtburchak maydonni tavsiflaydi va uning o'lchamlari va joylashuvini hisoblash uchun ishlatiladi. U to'rt qismdan iborat:

• Kontent qutisi: Elementning mazmuni (matn, rasm va boshqalar) ko'rsatiladigan maydon. Uning o'lchami width va height xususiyatlari bilan belgilangan.
• Padding qutisi: Kontent chegarasi va element chegarasi orasidagi bo'shliq. Uning o'lchami padding xususiyati bilan belgilangan. Elementning fon rangi va rasmi bu maydonga kengayadi.
• Chegara qutisi: Elementning chegarasi, padding qutisini o'rab turadi. Uning o'lchami border xususiyatlari bilan belgilangan.
• Marjin qutisi: Element chegarasi atrofidagi bo'shliq, uni boshqa elementlardan ajratadi. Uning o'lchami margin xususiyati bilan belgilangan. Bu maydon har doim to'liq shaffof.

Standart element o'lchami quyidagicha hisoblanadi:

 kenglik = width + padding-left + padding-right + border-left-width + border-right-width
 balandlik = height + padding-top + padding-bottom + border-top-width + border-bottom-width

box-sizing xususiyati bu modelni o'zgartirish imkonini beradi:

• content-box (standart): width va height faqat kontent qutisiga tegishli.
• border-box: width va height padding va borderni o'z ichiga oladi.

.element-default {
  width: 100px; /* Kontent qutisinin kengligi = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Elementning haqiqiy kengligi: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Elementning haqiqiy kengligi = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Kontent qutisinin kengligi: 100 - 10 - 10 - 5 - 5 = 70px */
}