อ่าน Box Model ใน DevTools

1) คลิกขวาเอลิเมนต์ → Inspect

2) ในแผง Styles หรือ Computed / Layout หาแผนภาพกล่อง (margin รอบนอก · border · padding · content)

3) เลื่อนเมาส์บนตัวเลขในแผนภาพ ดูไฮไลต์บนหน้า

4) เทียบค่าที่เห็นกับที่เขียนใน CSS และโหมด box-sizing

• แยกสีชั้น margin / border / padding / content ได้

• อ่านความกว้างจริงบนหน้าจอหลังรวมชั้นแล้ว

• ลองแก้ padding แล้วดูตัวเลขในแผนภาพเปลี่ยนทันที

DevTools คือเครื่องคิดเลขกล่องที่เร็วที่สุด — ใช้ทุกครั้งที่เลย์เอาต์เพี้ยน

ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้

เปิด DevTools แล้วอ่านค่า margin/padding/border ของการ์ดที่คุณสร้าง

ง่าย