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

เรียนรู้เกี่ยวกับความแตกต่างระหว่างระยะขอบและช่องว่างภายในใน CSS

Margin vs. Padding

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

• margin เพิ่มระยะห่างนอกเส้นขอบขององค์ประกอบ HTML
• padding เพิ่มระยะห่างภายในเส้นขอบขององค์ประกอบ HTML

เมื่อคุณใช้ระยะขอบหรือช่องว่างภายในกับองค์ประกอบ HTML สิ่งเหล่านี้จะส่งผลต่อองค์ประกอบที่แตกต่างกัน:

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

ด้านบนเป็น <button> . ง่ายๆ องค์ประกอบภายใน <div> คอนเทนเนอร์.

ปุ่มนี้มี:

• ระยะขอบ 24px ที่เพิ่มพื้นที่รอบๆ ปุ่มและผลักออกจากขอบขององค์ประกอบหลักที่อยู่ภายใน
• เส้นขอบ 4px
• ช่องว่างภายในขนาด 16px ที่เพิ่มช่องว่างระหว่างเส้นขอบของปุ่มและเนื้อหา
• เนื้อหา (ในกรณีนี้คือป้ายข้อความ:ปุ่ม)

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

ทั้ง margin และ padding คุณสมบัติควบคุมช่องว่าง อย่างไรก็ตาม มีฟังก์ชันตรงกันข้ามในแง่ของวิธีการใช้