ก่อนที่จะอธิบายอยากให้ดูรูปภาพข้างล่างนี้กันกอนครับ
- Margin คือช่วงห่างที่อยู่ข้างนอกที่สุด จะตีแผ่ออกไปยังด้านนอก มีลักษณะโปร่งใส ไม่มีสีครับ
- Border คือช่องที่อยู่ระหว่าง margin และ padding สามารถทำให้มันมีสีได้ ตัวอย่างเช่นเส้นขอบของรูปภาพ เป็นต้น
- Cadding เป็นช่วงห่างของ Content และ border มีสีเดียวกับพื้นหลังของ Content ที่อยู่ด้วยกันครับ
- Content คือตัวหลัก เช่น ตัวหนังสือหรือรูปภาพ
งั้นเรามาดูตัวอย่างกันครับ
บอกตามตรงผมเองก็ไม่รู้จะอธิบายให้เข้าใจ ยิ่งอธิบายมันก็ยิ่งงงไปกันใหญ่ ผมหวังว่าถ้าดูตัวอย่างนี้แล้วคงจะเข้าใจยิ่งขึ้นนะครับ
อธิบายอีกนิดนึง- ช่วงห่างระหว่างเส้นขอบสีส้มกับแนวบทความของบล็อกนี้คือ Margin
- สีส้มคือ Border
- ช่วงห่างระหว่างขอบสีส้มกับตัวหนังสือคือ Padding
- ตัวหนังสือคือ Content
โค้ดที่ใช้ก็คือ
<div style="background:#eae9e0; border:20px solid #f6c101; margin: 20px; padding: 20px; width: 150px;"></div>
หน้าเวบไม่อยู่ตรงกลางเวลาเปิดดูเวบต่างๆ ทำไงครับ
ช่วยหน่อยครับ