Mission 6: Margin

เป้าหมายของ Mission นี้: เว้นระยะห่างระหว่าง element ด้วย margin

margin คืออะไร

margin คือระยะห่าง นอก กรอบของ element — ดันตัวเองออกห่างจาก element ข้างเคียง เขียนแยกทิศทางได้: margin-top, margin-right, margin-bottom, margin-left หรือเขียน margin: 0.5rem; เพื่อกำหนดทุกด้านพร้อมกัน

margin vs padding

สับสนกันบ่อยมาก: margin = ระยะห่างนอกกรอบ (ระหว่าง element กับเพื่อนบ้าน), padding = ระยะห่างในกรอบ (ระหว่างขอบกับเนื้อหาข้างใน) — เรียนเรื่อง padding ต่อใน Mission ถัดไป

Demo

.price {
  text-align: center;
  font-weight: bold;
  margin-top: 0.5rem;
}