Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS2 sizing property vs CSS3 box sizing property
Let us understand the difference between CSS2 sizing property and CSS3 box-sizing property. In CSS2, the width and height properties only apply to the content area, while CSS3 box-sizing property allows you to control how the total element size is calculated.
Syntax
selector {
box-sizing: value;
}
Possible Values
| Value | Description |
|---|---|
content-box |
Default CSS2 behavior - width/height applies only to content |
border-box |
CSS3 behavior - width/height includes content, padding, and border |
CSS2 Default Sizing (content-box)
In CSS2, the width and height properties apply only to the content area. Padding and borders are added outside, making the total element size larger −
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
margin: 10px;
}
.div2 {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid red;
margin: 10px;
}
</style>
</head>
<body>
<div class="div1">Content: 200x100px</div>
<div class="div2">Total: 242x142px (200+20+20+1+1 width)</div>
</body>
</html>
Two boxes appear. The first green box is 202x102px total (200px content + 2px border). The second red box is 242x142px total (200px content + 40px padding + 2px border).
CSS3 box-sizing: border-box
With box-sizing: border-box, the width and height include content, padding, and border. The content area shrinks to accommodate padding and border within the specified dimensions −
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
margin: 10px;
}
.div2 {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid orange;
box-sizing: border-box;
margin: 10px;
}
</style>
</head>
<body>
<div class="div1">Total: 200x100px</div>
<div class="div2">Total: 200x100px (content: 158x78px)</div>
</body>
</html>
Two boxes appear, both exactly 200x100px in total size. The second orange box has the same total dimensions as the first, but its content area is smaller (158x78px) to accommodate the 20px padding and 1px border within the 200x100px total.
Conclusion
CSS2 sizing adds padding and border outside the specified width/height, while CSS3 box-sizing: border-box includes them within the dimensions. This makes layout calculations more predictable and is widely used in modern web development.
358 Views
