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 แตกต่างกันยังไง