CSSте кутучанын модели эмне?

CSS-деги куту моделин түшүнүү, веб-бетте элементтин ээлеген ордун кантип эсептелетин түшүндүрөт. Ал төмөнкүлөрдү камтыйт:

• Мазмун: Элементтин чын мазмуну үчүн бөлүм (текст, сүрөттөр).
• Padding (ичке аралык): Мазмун менен элементтин чегарасынын ортосундагы боштук.
• Border (чек): Padding жана мазмунду айландырган чек ара.
• Margin (сырткы аралык): Элементтин чек арасынын айланасындагы кеңдик, аны башка элементтерден бөлөт.

Стандарттык моделде (box-sizing: content-box) элементтин өлчөмү мазмун, padding жана чек аранын суммасынан аныкталат. Margin жалпы орунга кошулат, бирок өзү элементтин өлчөмүнө таасир этпейт.

box-sizing: border-box өзгөчөлүгү элементтин өлчөмүн эсептөөнү өзгөртөт, padding жана чек араны жалпы кеңдикке жана бийиктикке кошот. Бул учурда, элементтин өлчөмү width/height аркылуу аныкталат, жана padding менен чек ара "мазмундун ичинде" орун алат.

/* Стандарттык модел (дефолт) */
.element-content-box {
  width: 100px; /* Мазмундун өлчөмү */
  padding: 10px;
  border: 5px solid black;
  /* Жалпы кеңдик: 100px (мазмун) + 10px (сол padding) + 10px (оң padding) + 5px (сол чек ара) + 5px (оң чек ара) = 130px */
}

/* border-box моделинде */
.element-border-box {
  width: 100px; /* Жалпы кеңдик: мазмун + padding + чек ара */
  padding: 10px;
  border: 5px solid black;
  /* Мазмундун өлчөмү: 100px - 10px (сол padding) - 10px (оң padding) - 5px (сол чек ара) - 5px (оң чек ара) = 70px */
}

Куту моделин түшүнүү, баракчада элементтерди так жана так жайгаштыруу үчүн маанилүү.