Smart Dimensions: Understanding CSS box-sizing
Switch from confusing content-box to the intuitive border-box and build predictable layouts every time.
The Box Model Puzzle: Sizing Elements in CSS
Every element on a web page is a rectangular box. But sizing these boxes can be tricky. Let's see why.
The Default: content-box
The default value, content-box, creates a box where the width property only applies to the content. The total visible width is calculated as width + padding-left + padding-right + border-left + border-right. This often leads to unexpected layout shifts.
The Solution: border-box
border-box is the preferred model for modern web design. When you set an element's width to 100px, the final rendered width, including any padding and border, will be exactly 100px. The content area inside shrinks to accommodate them.
A Global Reset
To ensure consistent sizing across your entire project, it's standard practice to apply border-box to all elements with a universal selector at the top of your stylesheet: * { box-sizing: border-box; }.
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
div { width: 100%; padding: 20px; box-sizing: ; }
Practice Example: Code Editor
You have two divs that should sit side-by-side, each with width: 50%;. They have padding, causing them to wrap. Add one CSS property to the rule to fix this.
Box-Sizing Property
| Property | Description |
|---|---|
| box-sizing: content-box; | The element's size excludes padding and border (default value). |
| box-sizing: border-box; | The element's size includes padding and border. |
* Write your CSS code and apply it to see how `box-sizing` affects the size of the elements.
Results:
A Practical Guide to Mastering CSS Box Sizing
You've seen the basics, but understanding `box-sizing` fundamentally changes how you write CSS. It shifts layouts from being a game of arithmetic to an intuitive process of defining containers. Let's see it in action.
1. The Problem: The `content-box` Overflow
Imagine two columns that should each take up 50% of the screen. With the default `content-box`, adding any padding will cause them to exceed 100% of the container's width, breaking the layout.
.column {
/* box-sizing: content-box; (default) */
width: 50%;
padding: 20px;
border: 1px solid red;
}They don't fit side-by-side!
2. The Solution: Predictable Layouts with `border-box`
By simply adding `box-sizing: border-box;`, we tell the browser that the `width` property should define the final, visible width of the element, including padding and borders. The layout now works as expected.
.column {
box-sizing: border-box;
width: 50%;
padding: 20px;
border: 1px solid green;
}They fit perfectly!
Practical Takeaway: Make `box-sizing: border-box;` one of the first rules in your stylesheet. Applying it universally with `* { box-sizing: border-box; }` creates a more logical and maintainable sizing system for your entire project, eliminating a common source of layout bugs.