box-sizing สิ่งที่หลายคนอาจไม่รู้

Nook Supakorn
Aug 27, 2017 · 2 min read

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

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

จากภาพแสดงให้เห็นว่า ACTUAL WIDTH ประกอบไปด้วยอะไรบ้าง

เพราะ 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 แล้ว

ผลลัพธ์หลังใส่ box-sizing: border-box; เข้าไป

เพียงเท่านี้เราก็จะได้ ขนาดความกว้างที่ต้องการโดยไม่ต้องคำนวนให้ปวดหัว
ก็หวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนที่ทำเว็บนะครับ ถ้ามีอะไรผิดพลาดก็สามารถท้วงติงมาได้เลยนะครับ

Ref: https://internetingishard.com/html-and-css/css-box-model/#generic-boxes

)

Nook Supakorn

Written by

Hi My name is Nook . I am web developer.

HBOT.io

HBOT.io

Bot Platform

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade