CSS3 - ขนาดกล่อง
คุณสมบัติการปรับขนาดกล่องใช้เพื่อเปลี่ยนความสูงและความกว้างขององค์ประกอบ
ตั้งแต่ css2 คุณสมบัติของกล่องจะทำงานดังที่แสดงด้านล่าง -
width + padding + border = ความกว้างที่มองเห็นได้จริง / แสดงผลของกล่องขององค์ประกอบ
height + padding + border = ความสูงที่มองเห็นได้จริง / แสดงผลของกล่องขององค์ประกอบ
หมายถึงเมื่อคุณตั้งค่าความสูงและความกว้างมันจะใหญ่ขึ้นเล็กน้อยจากนั้นขนาดที่กำหนดจะทำให้องค์ประกอบที่ขึ้นลงและช่องว่างภายในเพิ่มความสูงและความกว้างขององค์ประกอบ
คุณสมบัติการปรับขนาด CSS2
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ภาพด้านบนมีความกว้างและความสูงเท่ากันของสององค์ประกอบ แต่ให้ผลลัพธ์ที่แตกต่างกันสาเหตุที่สองรวมคุณสมบัติช่องว่างภายใน
คุณสมบัติการปรับขนาดกล่อง CSS3
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>ตัวอย่างด้านบนมีความสูงและความกว้างเท่ากันกับ box-sizing:border-box. นี่คือผลลัพธ์ที่แสดงด้านล่าง
มันจะให้ผลลัพธ์ดังต่อไปนี้ -
องค์ประกอบด้านบนมีความสูงและความกว้างเท่ากันโดยมีขนาดกล่อง: border-box ดังนั้นผลลัพธ์จะเหมือนกันสำหรับทั้งสององค์ประกอบตามที่แสดงด้านบน