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 ดังนั้นผลลัพธ์จะเหมือนกันสำหรับทั้งสององค์ประกอบตามที่แสดงด้านบน