CSS มององค์ประกอบของ HTML (element) เป็นกล่องที่ซ้อนกันหลายกล่อง ซึ่งกล่อง 1 กล่อง เท่ากับ 1 องค์ประกอบ (element)
ภายในกล่องประกอบด้วย 1.content 2.padding 3.border และ 4.margin เรียงลำดับจากภายในสู่ภายนอกของ element ดังภาพที่ 1
- Content ส่วนของเนื้อหาภายใน element
- Padding ระยะห่างระหว่างเนื้อหากับเส้นขอบ
- Border เส้นขอบ
- Margin ระยะห่างระหว่างเส้นขอบกับ element อื่นๆ
ภาพที่ 1 Box model
ตัวอย่างการนำความรู้เรื่อง Box model ไปใช้งาน
<html> <head> <style> div { padding:20px; border:2px solid red; margin:8px; text-align:center; } h3{ margin:20px; } </style> </head> <body> <h3>การนำความรู้เรื่อง Box model ไปใช้งาน</h3> <div>Element 1</div> <div>Element 2</div> </body> </html>
ไฟล์ที่ 1 box_model.html
ผลลัพธ์ไฟล์ที่ 1
การนำความรู้เรื่อง Box model ไปใช้งาน
Element 1
Element 2