ทุกองค์ประกอบในเอกสารถูกเรนเดอร์เป็นกล่องสี่เหลี่ยมผืนผ้าด้วยเบราว์เซอร์ ความกว้าง ความสูง padding และ margin กำหนดพื้นที่ที่จัดสรรในและรอบๆ องค์ประกอบ แผนภาพต่อไปนี้แสดงแนวคิดของ box model:
แหล่งที่มา: w3.org
Content (เนื้อหา)
รวมข้อมูลจริงในรูปแบบข้อความ รูปภาพ หรือสื่ออื่นๆ คุณสมบัติ width และ height ใช้ปรับมิติของกล่องนี้
Padding (ระยะห่างภายใน)
พื้นที่ระหว่างขอบนอกของเนื้อหาและขอบ (border) เรียกว่า padding กล่องนี้สามารถปรับขนาดได้ด้วยคุณสมบัติ padding คุณสมบัติเฉพาะขอบ เช่น padding-left, padding-bottom ช่วยให้ได้ระยะห่างที่กำหนดเองได้
Border (ขอบ)
ระยะห่างระหว่างขอบนอกของ padding และขอบในของ margin กำหนดขอบขององค์ประกอบ โดยค่าเริ่มต้นความกว้างตั้งค่าเป็น 0 คุณสมบัติ border ใช้กำหนดขอบขององค์ประกอบ ขอบแต่ละด้านก็สามารถจัดสไตล์แยกกันได้
Margin (ระยะห่างภายนอก)
พื้นที่ระหว่างกล่องขององค์ประกอบและกล่องขององค์ประกอบรอบข้าง ถูกกำหนดเป็น margin นี่ analogous กับ page margin ซึ่งกำหนดเป็นพื้นที่ระหว่างขอบของหน้าและเนื้อหา มันโปร่งใสในสี จำลองคุณสมบัติของ padding เว้นแต่ว่ามันเคลียร์พื้นที่ภายนอกขอบขององค์ประกอบ เหมือนกับ padding ขอบแต่ละด้านสามารถกำหนดให้มี margin แบบกำหนดเองได้
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body * { outline: solid; } #demo { margin: auto; width: 50%; padding: 1em; border: 1px outset; display: flex; box-shadow: inset 0 0 15px mediumvioletred; box-sizing: border-box; } #demo div { padding: 2em; box-shadow: inset 0 0 9px orange; } </style> </head> <body> <div id="demo"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body * { outline: thin dotted; } #demo { margin: auto; width: 120px; height: 120px; padding: 1em; border: 1px outset; display: flex; box-shadow: inset 0 0 15px indianred; } #demo div { width: 40px; height: 40px; } div:nth-child(odd) { border: inset lightgreen; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; } div:nth-child(even) { border: inset lightblue; padding: 0.5em; } </style> </head> <body> <div id="demo"> <div></div> <div></div> <div></div> </div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
