The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Use predictable sizing | *, *::before, *::after { box-sizing: border-box; } | View examples |
| Use content-box | .sample { box-sizing: content-box; } | View examples |
| Add logical padding | .card { padding-block: 1rem; padding-inline: 1.5rem; } | View examples |
| Draw a border | .card { border: 1px solid #94a3b8; } | View examples |
| Add logical margin | .section { margin-block: 2rem; } | View examples |
| Center a constrained block | .panel { max-inline-size: 60rem; margin-inline: auto; } | View examples |
| Set logical dimensions | .sidebar { inline-size: 18rem; block-size: 100%; } | View examples |
| Fill but do not overflow | .content { inline-size: 100%; max-inline-size: 70rem; } | View examples |
| Clamp a preferred size | .dialog { inline-size: min(32rem, calc(100% - 2rem)); } | View examples |
| Use minimum intrinsic size | .label { inline-size: min-content; } | View examples |
| Use maximum intrinsic size | .badge { inline-size: max-content; } | View examples |
| Cap intrinsic growth | .menu { inline-size: fit-content(24rem); } | View examples |
| Reserve an aspect ratio | .thumbnail { aspect-ratio: 16 / 9; } | View examples |
| Crop replaced content | img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
} | View examples |
| Scroll only when needed | .log { max-block-size: 20rem; overflow: auto; } | View examples |
| Allow a flex item to shrink | .flex-child { min-inline-size: 0; } | View examples |
Every rendered box combines a content area with padding, border, and margin. Make the sizing model explicit, prefer logical properties when layout should follow writing direction, and express flexible constraints with min/max and intrinsic keywords instead of fixed dimensions everywhere.
Step by step
Detailed examples
Distinguish content, padding, border, and margin
Padding belongs inside the border and receives the element's background; margin is transparent space outside it. Vertical margins can collapse in normal block flow, while padding and borders do not. Prefer layout gap for repeated spacing between flex or grid children because it avoids margin-edge interactions.
.card {
margin-block: 2rem;
border: 2px solid #2563eb;
padding-block: 1rem;
padding-inline: 1.5rem;
background: #eff6ff;
}Choose what declared dimensions include
With content-box, width and height describe only content; padding and border are added outside. border-box makes the declared size include content, padding, and border, which is usually easier for page layout. Inherited box-sizing is another valid reset pattern when components need to opt into a different model.
.content-box, .border-box {
inline-size: 16rem;
padding: 2rem;
border: 0.5rem solid;
}
.content-box { box-sizing: content-box; }
.border-box { box-sizing: border-box; }Note: The content-box border box becomes 21rem wide; the border-box border box stays 16rem wide.
Size for writing modes and direction
inline-size and block-size map to the inline and block axes of the element's writing mode. Their min/max variants and margin/padding logical properties adapt naturally to right-to-left text and vertical writing. Use physical dimensions when the physical axis itself is the requirement, such as a fixed viewport-height effect.
.reading-column {
inline-size: 100%;
max-inline-size: 65ch;
margin-inline: auto;
padding-inline: 1rem;
}Combine preferred sizes with hard limits
A flexible size plus a maximum lets content grow without becoming excessively wide. min(), max(), and clamp() can compare relative and fixed constraints directly. Remember that percentage dimensions need an appropriate containing block and that min-size can override width when the constraints conflict.
dialog {
inline-size: min(32rem, calc(100% - 2rem));
max-block-size: calc(100dvb - 2rem);
overflow: auto;
}Let content contribute its natural size
min-content uses the narrowest intrinsic width, max-content uses the widest unwrapped width, and fit-content clamps the available-size behavior between intrinsic limits. These values are especially useful in grid tracks and compact controls, but long unbreakable strings still need an explicit wrapping or overflow policy.
.definition-list {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 0.5rem 1rem;
}
.menu { inline-size: fit-content(24rem); }Reserve media geometry before it loads
aspect-ratio supplies a preferred ratio; it has an effect when at least one dimension is automatic. Replaced elements such as images also have intrinsic dimensions, and an explicit auto-plus-ratio form can fall back while loading. object-fit controls how the replaced content maps into a box whose dimensions are already determined.
.thumbnail {
inline-size: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 0.75rem;
}
.thumbnail > img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}Choose an overflow policy intentionally
overflow:auto exposes scrollbars only when needed, hidden clips content but remains a scroll container, and clip prevents scrolling as well as painting outside the clip edge. Constrain the relevant axis before expecting scrolling. Flex and grid items may need min-inline-size:0 so their content can shrink inside the track.
.workspace { display: flex; }
.output {
flex: 1;
min-inline-size: 0;
max-block-size: 24rem;
overflow: auto;
}Local code tester
Inspect responsive box sizing
Change padding, constraints, and intrinsic values to see how the border box responds.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.