Ի՞նչ տարբերություն կա box-sizing: content-box և border-box-ի միջև։

Տարբերությունը box-sizing: content-box և box-sizing: border-box միջև այն է, թե ինչպես է բրաուզերը հաշվարկում տարրի ընդհանուր չափերը:

• content-box (դեպի նախնական արժեք): լայնությունը և բարձրությունը նշում են միայն բովանդակությունը: Այս չափերին ավելացվում են ներսի մաքուր (padding) և եզրագծեր (border), ինչը մեծացնում է վերջնական չափը:

• border-box: լայնությունը և բարձրությունը ներառում են բովանդակությունը, padding-ը և border-ը: Այլ կերպ ասած, padding-ը և border-ը "տեղավորվում" են սահմանված չափերի մեջ:

Օրինակ:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* կամ border-box */
}

• content-box-ով ընդհանուր լայնությունը կլինի՝ 200 + 102 + 52 = 230px:
• border-box-ով ընդհանուր լայնությունը կմնա՝ 200px, և բովանդակությունը կկրճատվի, որպեսզի տեղավորվի padding-ը և border-ը:

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