box-sizing สิ่งที่หลายคนอาจไม่รู้
สวัสดีครับ หลายคนอาจจะเคยเจอปัญหาเวลาสร้าง กล่องขึ้นมาในเว็บ กำหนด width แล้วขนาดที่ได้ออกมา ไม่เท่ากับ width ที่กำหนดไว้

จากการเขียน CSS นี้ถ้าตอบแบบไม่คิด จะตอบว่ากล่องนี้มีความกว้างเท่ากับ 200px
แล้วมันเท่ากับ 200px จริงไหม? คำตอบคือ “ไม่จริงครับ”

เพราะ width ที่เรากำหนดนั้น เป็นขนาดของ content อย่างเดียว ไม่ได้รวมขนาดของ padding และ border เข้าไปด้วย ซึ่งถ้ารวมเข้าไปด้วยเราก็ได้ขนาดของความกว้าง ACTUAL WIDTH
จาก code ได้มีการเพิ่ม padding 20px และ ขนาดเส้นอีก 2px ทำให้ขนาดของ div นี้จะอยู่ที่ 200px +20px(2) + 2px(2) = 244 * หมายเหตุ ที่ต้องคูณ 2 เพราะ padding ทั้งด้านซ้ายและขวา รวมถึงขนาดเส้นก็มีทั้งด้านซ้ายและขวาด้วยเช่นกัน

แล้วคำถามคือถ้าเราต้องการให้ความกว้างมีขนาดแค่ 200px เราต้องทำยังไง?
ถ้าเป็นแต่ก่อนผมคงตอบว่า ก็นั่งคำนวนเอาสิ padding: 20px , border: 2px เพราะฉะนั้น width ก็ 156px! หมู ๆ แต่เราจะเสียเวลาคำนวนมันทำไมละ เมื่อเรามี
box-sizing: border-box; เพียงแค่เราเติม มันเข้าไปปุ้ป ความกว้างของ div ก็จะเท่ากับ width ที่เราตั้งไว้ เพราะมันจะบังคับให้ขนาดของ div กว้างเท่ากับ 200px ซึ่งเป็นขนาดที่รวม padding และ borders แล้ว

เพียงเท่านี้เราก็จะได้ ขนาดความกว้างที่ต้องการโดยไม่ต้องคำนวนให้ปวดหัว
ก็หวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนที่ทำเว็บนะครับ ถ้ามีอะไรผิดพลาดก็สามารถท้วงติงมาได้เลยนะครับ
Ref: https://internetingishard.com/html-and-css/css-box-model/#generic-boxes

