ทุกองค์ประกอบในเอกสาร HTML จะแสดงเป็นกล่องสี่เหลี่ยมโดยเบราว์เซอร์ ความกว้าง ความสูง ช่องว่างภายใน และระยะขอบจะกำหนดพื้นที่ที่จัดสรรในองค์ประกอบรอบๆ ไดอะแกรมต่อไปนี้แสดงแนวคิดโมเดลกล่อง -
ที่มา:w3.org
เนื้อหา
ซึ่งรวมถึงข้อมูลจริงในรูปแบบข้อความ รูปภาพ หรือเนื้อหาสื่ออื่นๆ คุณสมบัติความกว้างและความสูงปรับเปลี่ยนขนาดของช่องนี้
แพดดิ้ง
ช่องว่างระหว่างขอบด้านนอกของเนื้อหาและเส้นขอบหมายถึงช่องว่างภายใน กล่องนี้สามารถปรับขนาดได้ตามคุณสมบัติช่องว่างภายใน คุณสมบัติเฉพาะขอบ เช่น padding-left, padding-bottom เป็นต้น ช่วยในการกำหนดระยะห่างที่กำหนดเอง
ชายแดน
ระยะห่างระหว่างขอบด้านนอกของช่องว่างภายในและขอบด้านในของระยะขอบจะกำหนดเส้นขอบขององค์ประกอบ โดยค่าเริ่มต้น ความกว้างของมันถูกตั้งค่าเป็น 0 คุณสมบัติ border ถูกใช้เพื่อกำหนดเส้นขอบขององค์ประกอบ นอกจากนี้ยังสามารถจัดสไตล์แต่ละขอบได้อีกด้วย
มาร์จิ้น
ช่องว่างระหว่างกล่องขององค์ประกอบและกล่องขององค์ประกอบโดยรอบถูกกำหนดเป็นระยะขอบ ซึ่งคล้ายกับระยะขอบของหน้าซึ่งกำหนดเป็นช่องว่างระหว่างขอบของหน้าและเนื้อหา เป็นสีโปร่งใสจำลองคุณสมบัติของช่องว่างภายใน ยกเว้นว่าจะล้างพื้นที่นอกเส้นขอบขององค์ประกอบ เช่นเดียวกับการเติม ขอบแต่ละอันสามารถกำหนดให้มีระยะขอบแบบกำหนดเองได้
ตัวอย่าง
<!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> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
