ฝึกสร้างการ์ดด้วย box model

สร้างการ์ดข้อมูลสั้น ๆ สองใบ จัดระยะให้ชัดและตรวจด้วย DevTools

• ตั้ง box-sizing: border-box ทั้งหน้า

• แต่ละการ์ดมี width, padding, border, margin

• พื้นหลังเห็นบริเวณ padding ชัด

• มีอย่างน้อยหนึ่งที่ใช้ shorthand กับค่าทีละด้าน

• เปิด DevTools อ่านแผนภาพกล่องได้

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

สร้างการ์ดสองใบตามสเปก

ใช้ class .card ซ้ำได้

ง่าย

ทดลองปิด/เปิด border-box แล้วเทียบความกว้างรวมใน DevTools

ปานกลาง

จัด margin แนวตั้งระหว่าง h2 กับ p แล้วสังเกต collapse

ปานกลาง