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
How is border-box different from content-box?
The CSS box-sizing property controls how an element's total width and height are calculated. Understanding the difference between border-box and content-box is crucial for precise layout control.
Syntax
box-sizing: content-box | border-box;
CSS content-box (Default)
This is the default value. The width and height properties only include the content area. Padding and border are added to the outside, making the element larger than the specified dimensions.
Example
The following example shows content-box behavior where padding and border add to the total size
<!DOCTYPE html>
<html>
<head>
<style>
.content-box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #3498db;
background-color: #ecf0f1;
box-sizing: content-box;
margin: 20px;
color: #2c3e50;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="content-box">
Content Box: 200px + 40px padding + 10px border = 250px total width
</div>
</body>
</html>
A light gray box appears with a blue border. The total width is 250px (200px content + 40px padding + 10px border), making it larger than the specified 200px width.
CSS border-box
The width and height properties include content, padding, and border. The content area shrinks to fit within the specified dimensions, making sizing more predictable.
Example
The following example shows border-box behavior where the total size remains exactly as specified
<!DOCTYPE html>
<html>
<head>
<style>
.border-box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #e74c3c;
background-color: #fadbd8;
box-sizing: border-box;
margin: 20px;
color: #2c3e50;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="border-box">
Border Box: Total width stays exactly 200px
</div>
</body>
</html>
A light pink box with a red border appears. The total width remains exactly 200px, with the content area automatically adjusted to accommodate padding and border.
Visual Comparison
The following example demonstrates both box-sizing values side by side with identical dimensions
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 80px;
padding: 20px;
border: 5px solid #8e44ad;
background-color: #f4f3ff;
margin: 20px;
display: inline-block;
vertical-align: top;
font-family: Arial, sans-serif;
color: #2c3e50;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box content-box">
Content-box: 250px total width
</div>
<div class="box border-box">
Border-box: 200px total width
</div>
</body>
</html>
Two purple-bordered boxes appear side by side. The content-box is visibly wider (250px total) while the border-box maintains exactly 200px width, demonstrating the key difference in sizing behavior.
Key Differences
| Property | content-box | border-box |
|---|---|---|
| Width/Height includes | Content only | Content + Padding + Border |
| Total element size | Larger than specified | Exactly as specified |
| Default behavior | Yes | No |
| Layout predictability | Less predictable | More predictable |
Conclusion
The border-box model is generally preferred for layout design as it makes sizing more intuitive and predictable. Many developers use * { box-sizing: border-box; } as a global reset to apply this behavior to all elements.
439 Views
