องค์ประกอบ HTML ทั้งหมดถือได้ว่าเป็นกล่อง
ใน CSS คำว่า "box model" ใช้เมื่อพูดถึงการออกแบบและการจัดวาง
รูปแบบกล่อง CSS นั้นเป็นกล่องที่พันรอบองค์ประกอบ HTML ทุกรายการ ประกอบด้วย: ขอบ เส้นขอบ ระยะห่างจากขอบ และเนื้อหาจริง ภาพด้านล่างแสดงรูปแบบกล่อง:
คำอธิบายส่วนต่าง ๆ :
เนื้อหา - เนื้อหาของช่องที่มีข้อความและรูปภาพปรากฏ
Padding - ล้างพื้นที่รอบๆ เนื้อหา ช่องว่างภายในมีความโปร่งใส
เส้นขอบ - เส้นขอบที่ล้อมรอบช่องว่างภายในและเนื้อหา
ระยะขอบ - ล้างพื้นที่นอกเส้นขอบ อัตรากำไรขั้นต้นคือ โปร่งใส
โมเดลกล่องช่วยให้เราเพิ่มเส้นขอบรอบองค์ประกอบและกำหนดพื้นที่ได้ ระหว่างองค์ประกอบ
การสาธิตรูปแบบกล่อง:
div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
เพื่อตั้งค่าความกว้างและความสูงขององค์ประกอบอย่างถูกต้องในทุกเบราว์เซอร์ คุณจำเป็นต้องทราบวิธีการทำงานของโมเดลกล่อง
ข้อสำคัญ: เมื่อคุณตั้งค่าคุณสมบัติความกว้างและความสูงของ องค์ประกอบด้วย CSS คุณเพียงแค่กำหนดความกว้างและความสูงของพื้นที่เนื้อหา ถึง คำนวณขนาดเต็มขององค์ประกอบ คุณต้องเพิ่มช่องว่างภายใน เส้นขอบ และระยะขอบด้วย
องค์ประกอบ <div> นี้จะมีความกว้างรวม 350px:
div { width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px. The total height of this element is 80px.</div>
</body>
</html>
นี่คือการคำนวณ:
320px (กว้าง)
+ 20px (ช่องว่างภายในซ้าย + ขวา)
+ 10px (ขอบซ้าย + ขวา)
+ 0px (ระยะขอบซ้าย + ขวา)
= 350px
ควรคำนวณความกว้างรวมขององค์ประกอบดังนี้:
ความกว้างขององค์ประกอบทั้งหมด=ความกว้าง + ช่องว่างภายในด้านซ้าย + ช่องว่างด้านขวา + ด้านซ้าย เส้นขอบ + เส้นขอบขวา + ระยะขอบซ้าย + ระยะขอบขวา
ควรคำนวณความสูงรวมขององค์ประกอบดังนี้:
ความสูงองค์ประกอบทั้งหมด=ความสูง + ระยะห่างด้านบน + ระยะห่างจากด้านล่าง + ด้านบน เส้นขอบ + เส้นขอบล่าง + ระยะขอบบน + ระยะขอบล่าง
หมายเหตุ: คุณสมบัติระยะขอบยังส่งผลต่อพื้นที่ทั้งหมดที่กล่องด้วย จะใช้เวลาบนหน้าแต่ระยะขอบจะไม่รวมอยู่ในขนาดจริงของ กล่อง. ความกว้างและความสูงรวมของกล่องจะหยุดที่เส้นขอบ