Margin vs Padding ใน CSS — ความแตกต่างคืออะไร?

เรียนรู้ความแตกต่างระหว่าง margin และ padding ใน CSS

Margin vs Padding

เริ่มจากนิยามที่สั้นที่สุด:

• margin เพิ่มพื้นที่ภายนอกขอบ (border) ของอีเลเมนต์ HTML
• padding เพิ่มพื้นที่ภายในขอบ (border) ของอีเลเมนต์ HTML

เมื่อคุณนำ margin หรือ padding ไปใช้กับอีเลเมนต์ HTML ทั้งสองจะส่งผลต่ออีเลเมนต์ต่างกันดังนี้:

ด้วยภาพประกอบแนวคิดข้างต้น ให้เราลองนำไปใช้กับอีเลเมนต์ HTML จริง

ข้างต้นคือ <button> อยู่ภายในคอนเทนเนอร์ <div>

ปุ่มนี้มี:

• margin 24px เพิ่มพื้นที่รอบปุ่มและผลักมันออกห่างจากขอบของอีเลเมนต์พาเรนต์
• border 4px
• padding 16px เพิ่มพื้นที่ระหว่างขอบปุ่มกับเนื้อหา
• เนื้อหา (ในที่นี้คือข้อความป้าย: Button)

button { padding: 16px; margin: 24px; border: 4px solid #282828; }

ทั้ง margin และ padding ควบคุม whitespace (พื้นที่ว่าง) แต่ทำงานในทางตรงข้ามกัน