Модели қуттии CSS чист?

Дар CSS, модели қуту тасвирлайди ҳар як элемент учун яратилган тўғри бўшлиқни ва унинг ўлчамлари ва жойлашувини ҳисоблаш учун ишлатилади. У тўрт қисмдан иборат:

• Мазмун қутиси: Элементнинг мазмуни (матн, расмлар ва бошқалар) кўрсатиладиган ҳудуд. Унинг ўлчами width ва height хусусиятлари билан белгиланади.
• Паддинг қутиси: Мазмун чегараси ва элемент чегараси орасидаги бўшлиқ. Унинг ўлчами padding хусусияти билан белгиланади. Элементнинг фон ранг ва расми бу ҳудудга кенгайди.
• Чегара қутиси: Элементнинг чегараси, паддинг қутисини ўраб туради. Унинг ўлчами border хусусиятлари билан белгиланади.
• Марджин қутиси: Элемент чегараси атрофидаги бўшлиқ, уни бошқа элементлардан ажратиб туради. Унинг ўлчами margin хусусияти билан белгиланади. Бу ҳудуд ҳар доим тўлиқ шаффоф.

Стандарт элемент ўлчами қуйидагича ҳисобланади:

ен = width + padding-left + padding-right + border-left-width + border-right-width
юз = height + padding-top + padding-bottom + border-top-width + border-bottom-width

box-sizing хусусияти бу моделни ўзгартиришга имкон беради:

• content-box (стандарт): width ва height қonly мазмун қутисига тааллуқли.
• border-box: width ва height padding ва borderни ўз ичига олади.

.element-default {
  width: 100px; /* Мазмун қутисининг кенглиги = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Ҳақиқий элемент кенглиги: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Ҳақиқий элемент кенглиги = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Мазмун қутисининг кенглиги: 100 - 10 - 10 - 5 - 5 = 70px */
}