Home 〉 CSS Tutorials 〉 CSS 'box-sizing' Property Explained with Simple Examples for Beginners
CSS 'box-sizing' Property Explained with Simple Examples for Beginners !
CSS 'box-sizing' Property Explained with Simple Examples for Beginners !
Confused about how padding and borders affect element dimensions? The CSS `box-sizing` property determines how the total width and height of an element are calculated. This tutorial clarifies the difference between `content-box` and `border-box` models. By understanding `box-sizing`, you can create layouts that behave predictably across browsers. Gain control over your element sizing with this property. Read the detailed tutorial on CSS 'box-sizing' Property
Introduction
When designing web layouts, the 'box-sizing' property helps you control how element sizes are calculated. It can prevent layout issues and save you from unexpected element overflows.
Let's break it down and understand how 'box-sizing' works step by step.
What Is 'box-sizing' in CSS?
In CSS, every element is a box. The size of that box can be calculated in two ways:
- 'content-box' (default): The width and height include only the content. Padding and border are added outside.
- 'border-box': The width and height include content, padding, and border. Everything fits within the specified size.
Syntax
Syntax ✍
selector {
box-sizing: border-box | content-box;
}
Difference Between 'content-box' and 'border-box'
Let's see the difference with examples.
Example 1: 'content-box' (Default)
html code 📝 
<!DOCTYPE html>
<html>
<head>
<style>
.content-box {
width: 200px;
padding: 20px;
border: 5px solid blue;
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="content-box">This box uses content-box</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Meaning: Total width = 200 (content) + 40 (padding) + 10 (border) = 250px
Example 2: 'border-box'
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.border-box {
width: 200px;
padding: 20px;
border: 5px solid green;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="border-box">This box uses border-box</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Meaning: Total width = 200px
Why Use 'border-box'?
- Easier to control layout dimensions
- Prevents boxes from breaking the layout
Common Practice
Many developers reset box-sizing for all elements to 'border-box' using this global rule:
Example 📄
* {
box-sizing: border-box;
}
Related Properties
- 'width': Sets the element's width.
- 'padding': Adds space inside the element.
- 'border': Adds border around the content and padding.
Conclusion
The 'box-sizing' property is simple but powerful. It gives you more control over your element sizes, especially when building responsive layouts. Use 'border-box' for easier and consistent designs.
By understanding how boxes are sized, you'll avoid unexpected spacing and layout issues.
Suggested Topics:
- HTML div and span Tag Explained with Examples - Complete Guide
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Padding Explained with Examples | CSS Box Model Guide
Related Topics:
Frequently Asked Questions (FAQs)
What is the default value of 'box-sizing'?
The default value is 'content-box'.
Which is better: 'content-box' or 'border-box'?
'border-box' is preferred in most modern layouts as it's easier to manage spacing.
Can I apply 'box-sizing' to all elements?
Yes. Use '* { box-sizing: border-box; }' to apply it globally.
Does 'box-sizing' affect margin?
No. It only affects how width and height are calculated inside the box (content, padding, border).
Will 'box-sizing' affect layout responsiveness?
Yes, using 'border-box' makes responsive layouts more consistent and easier to maintain.