Box-sizing กับการกำหนดขนาดของ Element ใน CSS

Box-sizing เป็นคุณสมบัติใหม่ของ css เพื่อช่วยในการจัดการ layout ได้ดีขึ้น ถ้าหากใครเคยทำงานกับ css มาสักระยะจะรู้ว่าการกำหนด width, padding, และ border นั้นสามารถทำให้เราสับสนได้

การใช้ box-sizing: border-box นั้นใช้สำหรับเมื่อเราต้องการกำหนดขนาดของ element นั้นตามค่า width เลยโดยไม่นำ padding และ border มาคิดภายนอก ยกเว้น margin ที่จะคิดภายนอก element เช่นเดิม

ซึ่งหากเราจะเขียน CSS โดยไม่ใช้ box-sizing: border-box และมี border มี padding ด้วย เราต้องคำนวณโดยการไปหักลบจากค่า width ที่ต้องการโดยคิดค่า width ที่ต้องการไว้ว่าเท่าไหร่ และไปลบกับค่า padding และ border ที่จะเพิ่มเข้ามาในด้าน ขวา และ ซ้าย และกำหนดค่า width ที่ลบไปแล้วเขียนใน CSS เช่น

.box{
  border-width: 10px;
  margin: 20px auto;
  padding: 50px;
  width: 500px;
}
 
จากขนาดความกว้างที่ตั้งไว้ width: 500px และ padding: 50px, border-width: 10px รวมแล้วมีความกว้างทั้งหมด 620px (500 + padding 50 ด้านซ้าย +padding 50 ด้านขวา + border-width 10 ด้านซ้าย + border-width 10 ด้านขวา)

หากไม่ต้องการการคำนวณแบบที่กล่าวไป มีวิธีที่ง่ายกว่านั้นคือการใช้ box-sizing: border-box;

.box{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.box{
  border-width: 10px;
  margin: 20px auto;
  padding: 50px;
  width: 500px;
}