content-box vs border-boxThe box-sizing property changes how the browser calculates an element's final size. This is one of the most useful CSS properties for predictable layouts because it decides whether padding and border are added on top of the width, or included inside it.
| Value | How Width/Height Work | Result |
|---|---|---|
content-box | Width applies only to content | Padding and border make the element bigger |
border-box | Width includes content, padding, and border | Size stays easier to control |
border-box Is PopularMost modern projects switch every element to border-box because it makes layouts simpler. A tl-card with width: 300px actually stays 300 pixels wide even if you add padding and borders.
.card-a {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 5px solid #2563eb;
}
/* Final rendered width: 350px */
.card-b {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid #2563eb;
}
/* Final rendered width: still 300px */A very common pattern is to apply box-sizing: border-box to every element. This reduces layout surprises and keeps spacing easier to reason about.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}Explore 500+ free tutorials across 20+ languages and frameworks.