CSS2 sizing property vs CSS3 box sizing property



Let us understand the difference between CSS2 sizing property and CSS3 box-sizing property.

CSS2 sizing property

Live Demo

<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

Live Demo

<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>
Updated on: 2020-06-20T08:40:10+05:30

322 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements