Padding & Margin

เขียนเว็บมานานพึ่งเข้าใจความแตกต่างระหว่าง margin กับ padding เมื่อไม่นานมานี้แหละ แล้วก็พึ่งเห็นว่าใน Flex มีแต่ padding ไม่มี margin ลองวาดรูปดูก็เริ่มสงสัยเหมือนกันว่ามันจะมีไว้ทำไมหว่าทั้ง 2 อัน เพราะหน้าที่มันคล้ายกันมาก… ลองดูรูปด้านล่างละกัน

margin คือค่าช่องว่างระหว่าง component นอกกับ component ที่ใส่ค่า margin ส่วน padding คือค่าช่องว่างระหว่าง component ที่ใส่ค่า padding กับ component ด้านใน จริงๆ ดูตามรูปด้านบนก็คงพอจะเข้าใจหละ(มั้ง) แต่จริงๆ มีแต่ padding ก็น่าจะใช้ได้ไม่น่าจะแตกต่างกับมีทั้งสองค่าหรือป่าวนะ