box-sizing: border-box ทำอะไร?

Question

Accepted Answer

`box-sizing` ควบคุม **สิ่งที่คุณสมบัติ `width` และ `height` วัดจริง ๆ**. ค่าเริ่มต้น (`content-box`) วัดเฉพาะเนื้อหา `border-box` ทำให้มันรวม padding และ border

## ปัญหากับค่าเริ่มต้น (content-box)

```css
.box {
  box-sizing: content-box; /* the default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px  ← bigger than you asked for! */
```

กับ `content-box` padding และ border **ถูกเพิ่ม** ไปยัง `width` ดังนั้นองค์ประกอบจึงกว้างกว่าตัวเลขที่คุณตั้งไว้ สิ่งนี้ทำลายเลาต์เอาต์: กล่อง `width: 50%` ที่มี padding จะล้นของ 50%

## การแก้ไข: border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
```

กับ `border-box` `width` คือ **ความกว้างสุดท้าย** ที่เรนเดอร์ — padding และ border ถูกลบออกจากด้านใน ตัวเลขที่คุณตั้งไว้คือขนาดที่คุณได้ซึ่งเป็นสัญชาตญาณมากกว่า

## รีเซ็ตสากล

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

เกือบทุกสไตล์ชีต เฟรมเวิร์ก และรีเซ็ตสมัยใหม่นำไปใช้ทั่วโลก สิ่งนี้ทำให้ขนาดสามารถคาดการณ์ได้: `width: 50%` + padding ยังคงกว้าง 50% อย่างแน่นอน กล่อง `width: 50%` สองกล่องนั่งเคียงข้างกันโดยไม่ล้นเป็นต้น

## ทำไมมันถึงสำคัญ

`border-box` ลบแหล่งที่มาทั่วไปที่สุดของปัญหาเรขาคณิตเลาต์เอาต์ — ความจำเป็นที่จะต้องเพิ่ม padding และ border ลงในทุก `width` ในจิตใจ

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