Ինչպե՞ս է box-sizing հատկությունը ազդում տարրի չափի վրա։

CSS box-sizing հատկությունը որոշում է, թե ինչպես են հաշվարկվում տարրերի չափերը — ներառյալ կամ ոչ ներքին մաքուր (padding) և սահմանները (border):

• Վարժ content-box (նախադրյալ): տարրերի լայնությունն ու բարձրությունը սահմանում են միայն բովանդակությունը: Ներքին մաքուր և սահմանները ավելացվում են այդ չափերին, մեծացնելով ընդհանուր չափը:

• Վարժ border-box: լայնությունն ու բարձրությունը ներառում են բովանդակությունը, ներքին մաքուրը և սահմանները: Սա նշանակում է, որ եթե սահմանեք 100px լայնություն, բովանդակությունը կկրճատվի padding և border հաշվի առնելով, որպեսզի ընդհանուր չափը մնա 100px:

Օրինակ՝

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

Այս դեպքում, .box տարրն ունենալու է ընդհանուր լայնություն 200px, ներառյալ padding և border: Եթե դա content-box լիներ, ընդհանուր լայնությունը կլիներ 200 + 210 + 25 = 230px:

border-box-ի օգտագործումը հաճախ պարզեցնում է դասավորությունը, քանի որ տարրերի չափերը չեն "վերածվում" padding և border-ի պատճառով։