Ի՞նչ է box-sizing: border-box հատկությունը և ինչ դեր է խաղում CSS-ում։

box-sizing հատկությունը որոշում է, թե ինչպես հաշվարկվում է տարրի ընդհանուր լայնությունը և բարձրությունը:

box-sizing: content-box (նախնական արժեք) — լայնությունն ու բարձրությունը վերաբերում են միայն բովանդակությանը (content): Padding և border ավելացվում են նշված լայնության/բարձրության արժեքներին:

box-sizing: border-box — լայնությունն ու բարձրությունը ներառում են padding և border: content-ը սեղմվում է, որպեսզի տեղավորվի նշված չափերի մեջ:

CSS-ում box-sizing: border-box-ի դերը:

• Հաշվարկների պարզեցում: Հեշտացնում է տարրերի չափերի հաշվարկը, հատկապես padding և border օգտագործելիս:
• Նախատեսելի դիզայն: Հնարավորություն է տալիս հստակ սահմանել բլոկների չափերը, անկախ padding և border-ից, ինչը դարձնում է դիզայնը ավելի կանխատեսելի:
• Հարմարավետություն բոքսի մոդելում: Համապատասխանում է բլոկի չափի ինтуիտիվ ընկալմանը — նրա եզրագծերին: Հեշտացնում է ցանցերի և ֆիքսված չափերի կոմպոնենտների ստեղծումը:

Օրինակ՝

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Ընդհանուր լայնությունը = 100 + 10*2 + 1*2 = 122px */
  /* Ընդհանուր բարձրությունը = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Ընդհանուր լայնությունը = 100px */
  /* Ընդհանուր բարձրությունը = 100px */
  /* Մատչելի բովանդակությունը կլինի 100 - 10*2 - 1*2 = 78px լայնությամբ և բարձրությամբ */
}