Box Model

หัวข้อนี้คืออะไร

width (ความกว้าง) และ height (ความสูง) คือ CSS property ที่ใช้กำหนดขนาดของ element โดยพื้นฐานแล้ว ค่าเหล่านี้บอก browser ว่า "กล่องนี้ควรกว้างและสูงเท่าไหร่" — แต่สิ่งที่ browser คำนวณจริงนั้นขึ้นอยู่กับ box-sizing, padding, border, และขนาดของ parent element ด้วย หน่วยที่ใช้กำหนดขนาดมีหลายแบบ:

• px (พิกเซล) — ขนาดคงที่แน่นอน เช่น width: 300px กล่องจะกว้าง 300 พิกเซลเสมอ
• % (ร้อยละ) — ขนาดสัมพัทธ์เทียบกับ parent เช่น width: 50% กล่องจะกว้างครึ่งหนึ่งของ parent
• auto — browser คำนวณให้เอง สำหรับ width มักขยายเต็ม parent, สำหรับ height มักหดตาม content
• vw / vh (วิวพอร์ต) — ขนาดเทียบกับ viewport เช่น width: 100vw คือเต็มความกว้างหน้าต่าง browser

ทำไมหัวข้อนี้จึงสำคัญ

ขนาดของ element ส่งผลโดยตรงต่อ layout และการแสดงผลของทั้งหน้า ถ้าไม่เข้าใจการทำงานของ width และ height คุณจะพบปัญหาเหล่านี้บ่อยมาก: - Element ล้นออกนอกกรอบ parent ทั้งที่กำหนดขนาดแล้ว - กำหนด width: 100% แต่ element ยังล้นอยู่ เพราะ padding และ border บวกออกด้านนอก - กล่องสูงกว่าที่คาดเพราะ browser ขยายตาม content อัตโนมัติ - Layout แตกบนมือถือเพราะใช้ค่า px คงที่โดยไม่คำนึงถึงขนาดหน้าจอ การเข้าใจ width และ height อย่างถ่องแท้ จะทำให้คุณ: - กำหนดขนาด element ได้ตรงตามต้องการ - เข้าใจว่าเมื่อไหรควรใช้ค่าคงที่ และเมื่อไหรควรใช้ค่า relative - ต่อยอดไปยัง Flexbox, Grid และ Responsive Design ได้อย่างมั่นใจ

ตัวอย่างจากชีวิตจริง

ลองนึกภาพการสั่งทำกรอบรูปที่ร้านเฟรม สถานการณ์ที่ 1 — กำหนดขนาดแน่นอน (px): "ต้องการกรอบรูปกว้าง 30 ซม. สูง 20 ซม." → ร้านทำให้ตามนั้นเลย ไม่ขึ้นอยู่กับว่าผนังกว้างแค่ไหน → ตรงกับ width: 300px; height: 200px; — ขนาดคงที่ไม่เปลี่ยนแปลง สถานการณ์ที่ 2 — กำหนดตามสัดส่วน (%): "ต้องการกรอบที่กว้างครึ่งหนึ่งของผนัง" → ถ้าผนังกว้าง 4 เมตร กรอบก็กว้าง 2 เมตร ถ้าผนังกว้าง 2 เมตร กรอบก็กว้าง 1 เมตร → ตรงกับ width: 50%; — ขนาดขึ้นอยู่กับ parent เสมอ สถานการณ์ที่ 3 — ปล่อยให้ขยายตามเนื้อหา (auto): "กรอบรูปที่ปรับขนาดตามรูปข้างใน" — ถ้ารูปใหญ่ กรอบก็ใหญ่ ถ้ารูปเล็ก กรอบก็เล็ก → ตรงกับ height: auto; — ความสูงขยายตาม content เอง

แนวคิดหลักที่ต้องเข้าใจ

px = ขนาดแน่นอน | % = ขึ้นกับ parent | auto = browser คำนวณให้เอง

ก่อนดูโค้ด ทำความเข้าใจหลักการเหล่านี้: 1. width / height กับค่าคงที่ (px) ขนาดไม่เปลี่ยนไม่ว่า parent จะเป็นขนาดไหน ใช้เมื่อต้องการขนาดแน่นอน เช่น ไอคอน, รูปภาพ, ปุ่มที่ออกแบบมาขนาดตายตัว 2. width / height กับค่า % (ร้อยละ) ขนาดคิดเป็น % ของ parent เสมอ — ถ้า parent กว้าง 800px และลูกกำหนด width: 50% ลูกจะกว้าง 400px 3. auto — ค่า default ที่แตกต่างกัน - width: auto บน block element = ขยายเต็ม parent (เหมือน width: 100% แต่ไม่บวก padding/border เพิ่ม) - height: auto = หดตาม content — ความสูงจะพอดีกับเนื้อหาข้างใน 4. ความสัมพันธ์กับ Box Model width และ height ทำงานร่วมกับ box-sizing เสมอ: - content-box: width = content เท่านั้น, padding และ border บวกเพิ่มด้านนอก - border-box: width = content + padding + border รวมกัน

การทำงานทีละขั้นตอน

เมื่อ browser render element ที่มี width และ height กำหนดไว้ — นี่คือลำดับที่เกิดขึ้น:

• 1. Browser ดู parent — ก่อนคำนวณขนาดของลูก browser ต้องรู้ขนาดของ parent ก่อน เพราะค่า % และ auto อ้างอิง parent
• 2. คำนวณ width — ถ้าเป็น px ใช้ค่านั้นเลย ถ้าเป็น % คูณกับ width ของ parent ถ้าเป็น auto block element ขยายเต็ม parent
• 3. คำนวณ height — ถ้าเป็น px ใช้ค่านั้น ถ้าเป็น auto (ค่า default) browser รอให้ content render ก่อน แล้วค่อยกำหนด height ตาม
• 4. ปรับตาม box-sizing — ถ้า content-box: width/height คือ content เท่านั้น, padding และ border บวกเพิ่ม ถ้า border-box: ทุกอย่างรวมอยู่ใน width/height แล้ว
• 5. วาง element ในหน้า — browser นำขนาดที่คำนวณได้ไปใช้จัดวาง layout ร่วมกับ element อื่นในหน้า

ตัวอย่างเชิงเทคนิค — โค้ดจริง

ดูตัวอย่าง 4 แบบที่ใช้บ่อยในงานจริง:

/* 1. ขนาดคงที่ด้วย px */
.icon {
  width: 48px;
  height: 48px;
  /* กว้างและสูง 48px เสมอ ไม่ขึ้นกับอะไร */
}

/* 2. ความกว้างตาม parent ด้วย % */
.card {
  width: 50%;
  /* กว้างครึ่งหนึ่งของ parent เสมอ */
  /* ถ้า parent = 800px → card = 400px */
  /* ถ้า parent = 400px → card = 200px */
}

/* 3. ความสูงตาม content (ค่า default) */
.paragraph {
  width: 300px;
  height: auto; /* ค่า default — ไม่ต้องเขียนก็ได้ */
  /* ความสูงขยายตามข้อความข้างใน */
}

/* 4. ความสูงคงที่ + scroll เมื่อ content ล้น */
.sidebar {
  width: 240px;
  height: 400px;
  overflow: auto; /* content ที่เกินจะ scroll ได้ */
}

ลองดู width แบบ px กับ % แบบ Interactive

ทดลองเปลี่ยนค่า width ของ .child แล้วดูว่ากล่องลูกเปลี่ยนขนาดอย่างไรเมื่อเทียบกับ parent:

จุดที่ผู้เริ่มต้นมักสับสน

นี่คือความเข้าใจผิดที่พบบ่อยที่สุด:

• ❌ คิดว่า width: 100% คือเต็มหน้าจอเสมอ — ไม่ใช่ width: 100% หมายถึงเต็ม parent เท่านั้น ถ้า parent มี padding หรือ border ด้วย ลูกก็อาจล้นออกมาหาก box-sizing เป็น content-box
• ❌ คิดว่า height ขยายเหมือน width — ไม่เหมือน height: auto (ค่า default) หดตาม content แต่ width: auto บน block element ขยายเต็ม parent ความสูงต้องกำหนดเองหรือขึ้นกับ content
• ❌ ลืมว่าขนาดขึ้นกับ parent — width: 50% จะให้ผลต่างกันถ้า parent ขนาดต่างกัน ถ้า parent ไม่มีขนาดกำหนด % อาจได้ผล 0 หรือคาดเดาไม่ได้
• ❌ ไม่เข้าใจผลของ padding/border — ใน content-box: กำหนด width: 200px แต่มี padding: 20px กล่องจะกว้าง 240px จริง ใช้ box-sizing: border-box เพื่อแก้ปัญหานี้
• ❌ กำหนด height: 100% แต่ไม่ได้ผล — height: 100% ต้องการให้ parent มี height กำหนดไว้ชัดเจน ถ้า parent ไม่มี height กำหนด browser ไม่รู้ว่า 100% ของอะไร

เปรียบเทียบวิธีกำหนดขนาด

สรุปความแตกต่างของแต่ละแบบในตารางเดียว:

สรุปท้ายบท

จำง่ายๆ แบบนี้: "width และ height ไม่ได้ทำงานโดดๆ — ขนาดจริงขึ้นอยู่กับ parent, box-sizing, padding และ border เสมอ"

• width และ height กำหนดขนาดของ content area (หรือทั้งกล่องถ้าใช้ border-box)
• px = ขนาดคงที่, % = ขึ้นกับ parent, auto = browser คำนวณให้เอง
• width: auto บน block element ขยายเต็ม parent | height: auto หดตาม content
• width: 100% ≠ เต็มหน้าจอ — หมายถึงเต็ม parent เท่านั้น
• height: 100% ต้องการ parent ที่มีขนาด height กำหนดไว้ด้วย
• ใช้ box-sizing: border-box เพื่อให้ width/height รวม padding และ border ไว้แล้ว

Lab 1 — กำหนดขนาดแบบพื้นฐาน

เป้าหมาย: ฝึกกำหนด width และ height ด้วยค่าคงที่ px โจทย์: กำหนด CSS ให้ .box ดังนี้ 1. width: 250px 2. height: 120px เงื่อนไข: ต้องใช้ค่าตรงตามโจทย์ และระบบจะตรวจขนาดจริงจาก browser ด้วย

Lab 2 — ใช้ % กับ parent

เป้าหมาย: เข้าใจว่า width แบบ % คิดจาก parent โจทย์: .parent มีความกว้าง 400px กำหนดให้ .child มี width: 75% เพื่อให้กล่องลูกกว้าง 300px (75% ของ 400) เงื่อนไข: ต้องใช้ % ไม่ใช่ px และต้องไม่เปลี่ยน width ของ .parent

Lab 3 — เลือกขนาดให้เหมาะกับ parent

เป้าหมาย: ฝึกใช้ width แบบ % ร่วมกับ height แบบ px และ auto โดยไม่ใช้ property จากบทถัดไป โจทย์: .parent กว้าง 400px และมีการ์ด 2 ใบอยู่ข้างใน 1. กำหนด .summary-card ให้มี width: 50% และ height: 120px 2. กำหนด .text-card ให้มี width: auto และ height: auto เงื่อนไข: ห้ามเปลี่ยน width ของ .parent เพราะระบบใช้ parent เป็นฐานตรวจค่า %