The box-sizing property changes how CSS calculates the size of an element.
By default, width and height apply only to the content area.
With box-sizing, you can control whether padding and border are included in the total size.
This is the default behavior of CSS.
Here, the width applies only to the content.
Padding and border are added outside, so the final box becomes bigger than 200 pixels.
With box-sizing: border-box, the width includes padding and border.
This means the element will stay exactly 200 pixels wide, no matter how much padding or border you add.
Why developers love box-sizing
Most professional developers use box-sizing: border-box because:
- Layouts become easier to manage
- Elements keep their size
- Responsive design becomes simpler
- Fewer layout bugs appear
Developer tip
Always add this line in your CSS projects:
* {
box-sizing: border-box;
}
It saves a lot of time and prevents unexpected layout issues.
Practice task
Create two boxes:
- Both width: 250px
- One without box-sizing
- One with box-sizing: border-box
Add padding and border to both and compare their sizes.
Next lesson
In the next page, you will learn how width and height work in the CSS box model and how they affect the final size of elements.