CSS Box Model
Every HTML element is a rectangular box composed of four layers from inside out.
text
┌─────────────────────────────┐
│ margin │
│ ┌───────────────────────┐ │
│ │ border │ │
│ │ ┌─────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘box-sizing
By default (content-box) width/height apply only to the content area.
css
/* content-box - default, confusing */
.box {
width: 200px;
padding: 20px;
border: 2px solid;
/* actual rendered width: 200 + 40 + 4 = 244px */
}
/* border-box - intuitive, use this */
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid;
/* actual rendered width: 200px - padding and border are inside */
}Global reset (recommended)
css
*, *::before, *::after {
box-sizing: border-box;
}| Property | box-sizing: content-box | box-sizing: border-box |
|---|---|---|
| width includes padding | No | Yes |
| width includes border | No | Yes |
| Predictable sizing | No | Yes |
Always use
border-boxglobally - it makes layouts predictable. Every modern CSS reset includes this rule.
updated
did you know it?