CSS การใช้ Margin กับ Padding และความแตกต่าง
บทความนี้ เรามาดูการใช้งาน Margin กับ Padding กันครับ และมาดูว่าการใช้งานกับการแสดงผล ต่างกันยังไง

Margin
Margin เป็นการเคลียร์ขอบนอก หรือการเว้นว่างของขอบนอกนั่นเอง เราสามารถกำหนดให้เว้นเฉพาะด้านซ้าน ด้านขวา ด้านบน หรือด้านล่างได้ โดยใช้ Property ที่แยกจากกันของ Margin หรือจะใช้รวมกันได้แค่กำหนด Margin อย่างเดียว ดูคำอธิบายอาจจะงง ๆ เรามาดูตัวอย่างกันดีกว่า

ตัวอย่างเริ่มต้นเมื่อไม่ใส่ margin หรือ padding




ข้างนอก
ข้างใน




ข้างนอก
ข้างใน


ตัวอย่างเมื่อใส่ margin




ข้างนอก
ข้างใน




ข้างนอก
ข้างใน


ตัวอย่างเมื่อใส่ margin ทางซ้าย ขวา ล่าง หรือบน




ข้างนอก
ข้างใน




ข้างนอก
ข้างใน






ข้างนอก
ข้างใน




ข้างนอก
ข้างใน






ข้างนอก
ข้างใน




ข้างนอก
ข้างใน


Padding
Margin เป็นการเคลียร์พื้นที่ภายในขอบ หรือการเว้นว่างของขอบในนั่นเอง เราสามารถกำหนดให้เว้นเฉพาะด้านซ้าน ด้านขวา ด้านบน หรือด้านล่างได้ โดยใช้ Property ที่แยกจากกันของ Padding หรือจะใช้รวมกันได้แค่กำหนด Padding อย่างเดียว ดูคำอธิบายอาจจะงง ๆ เรามาดูตัวอย่างกันดีกว่า

ตัวอย่างเริ่มต้นเมื่อไม่ใส่ margin หรือ padding




ข้างนอก
ข้างใน




ข้างนอก
ข้างใน


ตัวอย่างเมื่อใส่ padding




ข้างนอก
ข้างใน




ข้างนอก
ข้างใน


ตัวอย่างเมื่อใส่ padding ทางซ้าย ขวา ล่าง หรือบน




ข้างนอก
ข้างใน




ข้างนอก
ข้างใน






ข้างนอก
ข้างใน




ข้างนอก
ข้างใน






ข้างนอก
ข้างใน




ข้างนอก
ข้างใน




จากตัวอย่างจะเห็นว่า Margin กับ Padding แตกต่างกันยังไง