รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook


ติดต่อทำเว็บไซต์ โทร : O89-l79-O7l4 (ทุกวัน 24 ชั่วโมง)

รายการหลัก



บทความ


Page Ranking Tool

เปรียบเทียบ margin กับ padding


สอน CSS
> เปรียบเทียบ margin กับ padding


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

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

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

margin

เราจะใช้คำสั่ง margin เมื่อเราต้องเลื่อนตำแหน่งของกรอบรูปไปตามพื้นที่บนผนัง เช่นถ้าต้องการขยับกรอบรูปไปทางซ้าย 100 พิกเซล ก็ต้องใช้คำสั่ง margin-right: 100px เพื่อดันจากที่ขวาไป 100 พิกเซล หรือ ถ้าต้องการขยับกรอบรูปลงมาด้านล่าง 20 พิกเซล ก็ให้ใช้คำสั่ง margin-top: 20px เพื่อดันจากด้านบนลงมา 20 พิกเซล ดังตัวอย่างในรูป

สังเกตได้ว่าตำแหน่งของกรอบรูปเปลี่ยนไปตามการใช้คำสั่ง margin โดยที่ตำแหน่งของรูปภายในกรอบรูปยังเหมือนเดิม

padding

ส่วนคำสั่ง padding เราจะใช้ต่อเมื่อเราต้องการเคลื่อนย้ายตำแหน่งภายในกรอบรูป เช่นแทนที่จะให้รูปอยู่ตรงกลางกรอบรูป เราอยากเลื่อนตัวรูปไปอยู่ด้านขาวล่างของกรอบรูป ให้เราใช้คำสั่ง padding-top: 20px และ padding-right: 50px เพื่อดันรูปให้ลงมา 20 พิกเซล และดันรูปไปทางซ้าย 50 พิกเซลตามลำดับ ดังแสดงในรูป

จะเห็นได้ว่าตำแหน่งของกรอบรูปยังอยู่กับที่ แต่ที่เปลี่ยนแปลงคือตำแหน่งของรูปภายในกรอบรูปที่มีผลจากการใช้คำสั่ง padding นั่นเอง

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

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

แต่คำสั่ง padding ไม่สามารถทำได้ เพราะยังไงรูปก็ต้องอยู่ในกรอบรูปเสมอไม่สามารถทะลุออกนอกกรอบรูปได้ แต่ตัวกรอบรูปทั้งหมดสามารถเคลื่อนย้าย

สรุปง่ายๆคือสำหรับหลักในการเลือกใช้คำสั่ง margin และ padding คือ เมื่อคุณต้องการตั้งค่าระยะความห่างภายนอกกล่อง(หรือกรอบรูป)ให้ใช้คำสั่ง margin แต่หากคุณต้องการตั้งค่าระยะความห่างภายในกล่อง(หรือกรอบรูป)ให้ใช้คำสั่ง padding ครับ 


refer: http://margin0auto.wordpress.com/2011/03/29/margin-%E0%B8%9B%E0%B8%B0%E0%B8%97%E0%B8%B0-padding/



Short URL click!
<< กลับคืน : เข้าชม 1,997 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
ดูหนังออนไลน์ ดูหนังชนโรงhttp://www.xn--22c2c4blb9n.xn--o3cw4h/