คุณสมบัติ boxSizing ใช้ระบุวิธีคำนวณความกว้างและความสูงรวมขององค์ประกอบ มี 2 โหมดหลัก: content-box (ค่าเริ่มต้น) และ border-box
ไวยากรณ์ (Syntax)
object.style.boxSizing = "content-box|border-box|initial|inherit"ค่าที่รองรับ
| ค่า | คำอธิบาย |
|---|---|
| content-box | ค่าเริ่มต้น width/height = เนื้อหาเท่านั้น padding/border เพิ่มขนาดรวม |
| border-box | width/height = เนื้อหา + padding + border (ขนาดคงที่ เนื้อหาย่อเล็กลง) |
| initial | ตั้งค่ากลับเป็นค่าเริ่มต้น (content-box) |
| inherit | สืบทอดจากพาเรนต์ |
เปรียบเทียบแบบภาพ
┌─────────────────────────────────────────────────────────────┐ │ content-box (default) │ │ width: 200px │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ padding: 20px │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ content: 200px │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────┘ │ │ Total width = 200 + 20×2 + border×2 = 240px+ │ ├─────────────────────────────────────────────────────────────┤ │ border-box │ │ width: 200px │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ border: 10px │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ padding: 20px │ │ │ │ │ │ ┌─────────────────────────────────────────────┐ │ │ │ │ │ │ │ content: 200 - 20×2 - 10×2 = 140px │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ │ Total width = 200px (คงที่) │ └─────────────────────────────────────────────────────────────┘
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 350px;
border: 30px solid lightpink;
box-sizing: border-box;
padding: 20px;
}
</style>
<script>
function changeBoxSizing() {
document.getElementById("DIV1").style.boxSizing = "content-box";
document.getElementById("Sample").innerHTML = "โหมด box-sizing เปลี่ยนเป็น content-box แล้ว (ขนาดรวมจะเพิ่มขึ้น)";
}
</script>
</head>
<body>
<div id="DIV1">ข้อความตัวอย่างภายใน DIV. HELLO WORLD DIV.</div>
<p>คลิกปุ่มเพื่อเปลี่ยน box-sizing ของ div ด้านบน</p>
<button onclick="changeBoxSizing()">เปลี่ยน Box Sizing</button>
<p id="Sample"></p>
</body>
</html>ผลลัพธ์
ก่อน (border-box): ขนาดรวม 350x100px คงที่ เนื้อหาย่อเล็กลง
หลัง (content-box): ขนาดรวมเพิ่มขึ้นเป็น 350 + 20×2 + 30×2 = 450x160px
Universal Box Sizing (Best Practice)
/* ใช้ border-box สำหรับทุกองค์ประกอบ - แนะนำอย่างยิ่ง */
*, *::before, *::after {
box-sizing: border-box;
}
/* หรือเฉพาะองค์ประกอบที่ต้องการ */
.form-input, .card, .button {
box-sizing: border-box;
}ทำไม border-box ดีกว่า?
- คาดเดาได้ง่าย: width: 50% จริงๆ แล้วกว้าง 50% ไม่ต้องคิด padding/border
- Responsive Design: ทำงานร่วมกับ % ได้ดี
- ไม่แตก Layout: เพิ่ม padding/border ไม่ทำลาย Grid/Column
- Framework ทุกตัวใช้: Bootstrap, Foundation, Tailwind ทั้งหมดตั้งค่านี้ไว้
การรองรับเบราว์เซอร์
รองรับเต็มรูปแบบ IE8+ (IE8 ต้องไม่ใช้ prefix)
