ทุกอย่างคือกล่อง

แนวคิด

เบราว์เซอร์วาดเอลิเมนต์เป็นสี่เหลี่ยม (box) เรียงและซ้อนกัน — แม้ข้อความหรือรูปก็อยู่ในกล่อง

สี่ชั้นจากในออกนอก

1) content — เนื้อหา (ข้อความ รูป)

2) padding — ระยะว่างภายใน ระหว่างเนื้อหากับกรอบ

3) border — เส้นขอบ

4) margin — ระยะว่างภายนอก ระหว่างกล่องนี้กับกล่องอื่น

จำภาพชั้นหัวหอม: เนื้อหา → รองใน → กรอบ → เว้นนอก