Margin VS Padding

ผมเชื่อว่าทุกคนที่หัดเขียน CSS ใหม่ๆจะต้องมีอาการมึนๆงงๆกับเจ้าคำสั่ง margin กับ padding กันทุกคน และผมก็เป็นหนึ่งในนั้น กว่าผมจะเข้าใจความแตกต่างและใช้ได้ถูกต้อง ก็ต้องใช้งมโข่งอยู่นานเหมือนกัน แต่ถ้าคุณได้อ่านหลักการง่ายๆที่ผมอธิบายในบล็อกนี้จะรู้เลยว่าไม่ได้ยากอะไรเลย(จริงๆ)
 

ารที่เราจะเข้าใจความแตกต่างระหว่างคำสั่ง margin และ padding เราต้องเข้าใจรูปแบบการสร้างกล่องหรือ Box Model ของ CSS ซะก่อนครับ โดยจะใช้ภาพกรอบรูปบนฝาผนังประกอบคำอธิบาย จะได้เข้าใจกันได้ง่ายๆครับ
 

จากในรูปจะเห็นได้ว่าพื้นที่นอกกรอบรูปทั้งหมดเป็นพื้นที่ของ margin, กรอบรูป เป็นพื้นที่ของ border, พื้นที่ว่างระหว่างกรอบรูปถึงตัวรูปคือ padding และตัวรูปคือพื้นที่ของเนื้อหาในกล่อง

อ่านบทความเพิ่มเติมได้ที่เว็บไซต์ www.cw.in.th