เปรียบเทียบ CSS2 Sizing กับ CSS3 Box Sizing

มาทำความเข้าใจความแตกต่างระหว่าง CSS2 sizing property และ CSS3 box-sizing property

CSS2 Sizing Property (โมเดลกล่องแบบเดิม)

<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 Box-Sizing Property (โมเดลกล่องใหม่)

<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>