Box Model ใน CSS - Box-sizing Property คืออะไร

เมื่อเริ่มต้นการเรียนรู้ HTML และ CSS เรามักจะพบกับแนวคิดสองสิ่งนี้เสมอ นั่นคือ "Box Model" ใน CSS และ "Box-sizing Property" ซึ่งเป็นส่วนสำคัญในการควบคุมขนาดและการแสดงผลขององค์ประกอบบนหน้าเว็บ เบื้องต้นแล้วควรทำความเข้าใจว่า Box Model ทำงานอย่างไร และ Box-sizing Property มีบทบาทอย่างไรในการควบคุม Box Model

#### ทำความรู้จักกับ Box Model

Box Model เป็นการทำความเข้าใจว่าส่วนประกอบ HTML ที่เราสร้างขึ้นมีโครงสร้างอย่างไร โดยทั่วไปแล้วจะอธิบายรูปแบบและโครงสร้างขององค์ประกอบ (Element) ในแง่สี่ด้านสำคัญ ได้แก่

นี่คือตัวอย่างโครงสร้าง Box Model ทั้งหมด:

+-------------------------+
|        Margin           |
|  +-------------------+  |
|  |     Border         |  |
|  |  +-------------+  |  |
|  |  |  Padding     |  |  |
|  |  | +---------+  |  |  |
|  |  | | Content |  |  |  |
|  |  | +---------+  |  |  |
|  |  +-------------+  |  |
|  +-------------------+  |
+-------------------------+

ในโครงสร้างนี้ ทุกส่วนล้วนมีผลต่อขนาดและการจัดวางขององค์ประกอบ

#### ความสำคัญของ Box-sizing Property

Box-sizing Property ใน CSS เป็นตัวแปรที่ใช้ควบคุมวิธีการคำนวณขนาดความกว้างและความสูงขององค์ประกอบ ซึ่งปกติแล้ว CSS จะใช้ค่า `content-box` เป็นค่าเริ่มต้น ซึ่งหมายถึงว่า Width และ Height ที่กำหนดให้กับองค์ประกอบจะรวมเฉพาะ Content เท่านั้น ไม่รวม Padding และ Border

.element {
    box-sizing: content-box; /* นี่คือค่าเริ่มต้น */
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}

ในกรณีนี้ ขนาดขององค์ประกอบจะถูกคำนวณเป็น 250px (200px ของ Content + 2*20px ของ Padding + 2*5px ของ Border)

#### ด้วย Box-sizing: Border-box สิ่งนี้ที่เปลี่ยนแปลง

ถ้าเราต้องการให้ขนาดที่กำหนดรวมทั้ง Padding และ Borderด้วย สามารถใช้ค่า `border-box` ซึ่งทำให้การคำนวณขนาดองค์ประกอบง่ายขึ้นและคาดการณ์ได้มากขึ้น

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

ด้วย `box-sizing: border-box;` ขนาดขององค์ประกอบจะยังคงเป็น 200px โดยที่จะรวม Padding และ Border เข้าไปด้วย ซึ่งทำให้การออกแบบหน้าเว็บไซต์มีความง่ายและคล่องตัวมากขึ้น

#### Use Case ของ Box-sizing

การใช้ `box-sizing: border-box;` เป็นแนวทางที่นิยมโดยเฉพาะเมื่อออกแบบเว็บไซต์ที่ต้องการให้มีขนาดองค์ประกอบที่แน่นอน ไม่เกิดความวุ่นวายเมื่อเพิ่ม Padding หรือ Border อาจใช้ร่วมกับการรีเซ็ต CSS โดยทั่ว ๆ ไป

/* CSS Reset สำหรับ Box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

โค้ดข้างต้นจะกำหนดให้ทุกองค์ประกอบในหน้าใช้การคำนวณขนาดแบบ Border-box เป็นค่าเริ่มต้น ซึ่งจะช่วยให้การจัดวางมีความเรียบง่ายและมั่นคง กำจัดข้อสงสัยเกี่ยวกับขนาดองค์ประกอบที่อาจเปลี่ยนแปลงตาม Padding หรือ Border

#### สรุป

Box Model และ Box-sizing Property ใน CSS คือพื้นฐานที่สำคัญในการเข้าใจและจัดการกับเลย์เอาท์ของเว็บไซต์อย่างมีประสิทธิภาพ การเข้าใจโครงสร้างและการใช้ Box-sizing อย่างชาญฉลาดสามารถช่วยลดความยุ่งยากเมื่อต้องปรับแต่งหน้าเว็บและเพิ่มประสิทธิภาพในการออกแบบ ตลอดจนทำให้ Developer และ Designerสามารถทำงานร่วมกันได้อย่างราบรื่น หากคุณสนใจในเรื่องราวในเชิงลึกของ CSS และต้องการสร้างผลงานที่สวยงาม ลื่นไหล หรือต้องการเสริมความสามารถในการพัฒนาเว็บ ลองพิจารณาเข้าร่วมการเรียนการสอนที่ Expert-Programming-Tutor (EPT) เพื่อยกระดับความรู้และทักษะการเขียนโปรแกรมของคุณให้สูงขึ้นในอนาคต!

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

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/