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
Selected Reading
CSS Box Sizing Property
The CSS box-sizing property controls how the width and height of an element are calculated. By default, padding and border are added to the specified width and height, but this property allows you to change this behavior.
Syntax
selector {
box-sizing: value;
}
Possible Values
| Value | Description |
|---|---|
content-box |
Default. Width and height apply to content only |
border-box |
Width and height include content, padding, and border |
Default Behavior (content-box)
By default, CSS follows this calculation −
Total width = width + padding + border Total height = height + padding + border
Example: Comparing Box Sizing Values
The following example demonstrates the difference between content-box and border-box −
<!DOCTYPE html>
<html>
<head>
<style>
.content-box {
width: 300px;
height: 100px;
padding: 20px;
border: 5px solid blue;
margin-bottom: 20px;
box-sizing: content-box;
background-color: #f0f8ff;
}
.border-box {
width: 300px;
height: 100px;
padding: 20px;
border: 5px solid red;
box-sizing: border-box;
background-color: #ffe0e0;
}
.box-text {
font-family: Arial, sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div class="content-box box-text">content-box: Total width = 350px</div>
<div class="border-box box-text">border-box: Total width = 300px</div>
</body>
</html>
Two boxes appear: The first (blue border) is wider at 350px total width, while the second (red border) maintains exactly 300px total width despite having the same padding and border values.
Practical Use Case
Setting box-sizing: border-box is commonly used for responsive layouts where you want elements to maintain their specified dimensions −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.container {
display: flex;
gap: 10px;
padding: 10px;
background-color: #f5f5f5;
}
.box {
width: 50%;
padding: 15px;
border: 2px solid #333;
background-color: #87CEEB;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
</body>
</html>
Two equal-width boxes appear side by side, each taking exactly 50% width including their padding and borders, maintaining perfect alignment.
Conclusion
The box-sizing property is essential for predictable layouts. Using border-box makes responsive design easier by ensuring elements maintain their specified dimensions regardless of padding and border values.
Updated on: 2026-03-15T11:58:59+05:30
132 Views
Advertisements