Ինչ է 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 */
}

Հասկանալով բլոկային մոդելը, կարևոր է ճշգրիտ դիրքավորելու և տարրերը դասավորելու համար էջում։