CSS Box Model Cheat Sheet: Margin, Padding, Border & box-sizing

Every CSS box has content, padding, border, and margin. In the default content-box model, width is only the content, so padding and border add extra pixels. box-sizing: border-box includes padding and border in width, which is what most UI work expects.

This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Content: The area where text and children sit. width/height refer here under content-box.
• Padding: Inside the border, around the content. Backgrounds extend under padding.
• Border: Stroke on the edge. Counts toward size with border-box.
• Margin: Outside the border. Vertical margins can collapse between siblings in normal flow.
• border-box: width = content + padding + border. Use it globally.
• Outline: Does not take layout space. Use for focus rings; do not rely on it for hit area.
• Overflow: Content that does not fit is clipped, scrolled, or visible depending on overflow.
• Percentage: Padding/margin percentages are relative to the containing block’s width, including vertical padding.

Copy-paste examples

Global border-box and a padded full-width card

Without border-box, width: 100% plus padding overflows. With it, the card stays in the parent.

*, *::before, *::after {
  box-sizing: border-box;
}
.card {
  width: 100%;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  margin-bottom: 1rem;
}

Common mistakes

• Setting width: 100% and padding on content-box elements and blaming the parent.
• Using margin to create inner spacing that should have been padding (background will not fill).
• Expecting vertical margins to add inside a flex/grid container the way gap does.
• Hiding overflow to “fix” box-model bugs and clipping focus rings or dropdowns.

FAQ

1. Why do two paragraphs have less space than their margins suggest? Vertical margin collapsing in block flow. Flex and grid items do not collapse margins the same way; use gap.

1. Does BLOGPH0 affect margin? No. Margin is always outside the specified width.

1. Min-width vs width? min-width sets a floor. A replaced element or long word can still force overflow unless you add wrapping or min-width: 0 in flex/grid.

Related CSS cheat sheets

• Css Cheat Sheet 2026
• Css Flexbox Cheat Sheet
• Css Grid Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.