Box Model

Workshop 1: Announcement Card

สร้างกล่องประกาศที่มี padding ภายใน, border กรอบ และ margin ห่างจากขอบ — สังเกตว่า padding ขยายพื้นที่ภายใน ส่วน margin ผลักกล่องออกจากขอบ browser

Workshop 2: Registration Form

สร้างฟอร์มลงทะเบียนที่ input ไม่ล้นกรอบ — เคล็ดลับอยู่ที่ `box-sizing: border-box` ร่วมกับ `width: 100%` ทำให้ padding ไม่บวกเพิ่มความกว้าง

Workshop 3: Status Log Panel

สร้าง panel แสดง log กิจกรรมที่มีความสูงคงที่ — เมื่อเนื้อหาล้น height ที่กำหนด `overflow-y: auto` จะเพิ่ม scrollbar ให้อัตโนมัติแทนที่จะล้นออกมา

Workshop 4: Navigation Tags

สร้าง navigation ที่ใช้ `display: inline-block` — ต่างจาก `inline` ตรงที่รับ padding และ margin ได้ครบทุกทิศทาง แต่ยังเรียงตัวในแนวนอนเหมือน inline element