Understand the CSS box model

What this solves

Every rendered element occupies boxes. The content box holds text or replaced content, padding creates inner space, the border surrounds padding, and margin separates the border from neighboring boxes. Understanding those areas explains why a declared width may not equal the visible width and why overflow appears.

Use the box model when cards do not align, controls exceed their container, spacing collapses unexpectedly, or a responsive grid creates page-level horizontal scrolling.

Minimal correct example

*,
*::before,
*::after {
  box-sizing: border-box;
}

.card {
  inline-size: min(100%, 34rem);
  padding: 1.25rem;
  border: 1px solid currentColor;
  border-radius: 0.75rem;
}

With border-box, the declared inline size includes padding and border. The card can shrink to available width while preserving a readable maximum.

How browsers actually behave

Normal-flow block boxes usually fill the available inline space. Inline boxes flow with text and do not treat every dimension like a block. Replaced elements such as images have intrinsic dimensions, while words, URLs, and controls contribute minimum content sizes.

Vertical margins between adjacent normal-flow blocks can collapse. Padding and borders do not collapse. Flex and grid containers establish different layout rules, and their children often have automatic minimum sizes that prevent shrinking below content. Inspect the Layout and Computed panels to see the resolved dimensions rather than adding random width overrides.

Decisions and trade-offs

Use padding for space inside a component boundary and gap for consistent space between flex or grid children. Use margins for deliberate external separation, but avoid a system where every component guesses both its own and its neighbor's spacing.

Fixed widths are appropriate for genuinely fixed media or print artifacts, not for text-bearing page regions. Prefer logical properties such as inline-size and margin-inline when the design should adapt to writing direction. Use min(), max(), and clamp() only when their bounds express a clear content decision.

Accessibility consequences

Fixed heights clip text when a person increases font size or when a translated label wraps. Small padding creates targets that are difficult to operate. Hidden overflow can conceal focus indicators, validation errors, or content without giving a scroll mechanism.

Allow boxes containing text to grow in block direction. Keep focus rings outside clipped ancestors, and test touch and pointer targets with their real labels. A local scroll container is acceptable for genuine code or tabular data when it is labeled and keyboard usable; hiding whole-page overflow is not a repair.

Common failures

• A 100% input exceeds its card. Padding and border are added outside the content-box width. Apply a consistent border-box rule.
• A grid forces page overflow. A child has an automatic minimum size or an unbreakable token. Use minmax(0, 1fr), min-width: 0, or safe wrapping on the specific component.
• Spacing vanishes between blocks. Vertical margins collapsed. Use parent padding, layout gap, or a new formatting context when that matches intent.
• Text is clipped at zoom. A fixed height assumes one line. Remove it and let content determine height.
• A focus ring is cut off. An ancestor clips overflow. Preserve visible focus or move clipping to a narrower decorative layer.

Verify it

Select the failing element in DevTools and inspect content, padding, border, margin, computed width, min-width, and overflow. Toggle declarations one at a time. Add a long URL, a long translated label, a validation message, and a large default font. Test at 320 CSS pixels and 200% text zoom. Navigate by keyboard and confirm every focus indicator and message stays visible without page-level horizontal scrolling.

Exercise and next step

Build three cards with different amounts of content and one long token. Make them share a column width without fixed heights, clipping, or page overflow. Explain which spacing belongs to the card and which belongs to the layout. Next, learn why one rule wins over another before increasing selector weight.

Practice under content pressure

Repeat the card exercise with a 40-character unbroken identifier, a translated button label, a two-line error, and a user font set larger than your default. Inspect which box establishes the minimum size at each failure. Fix that box rather than adding a page-wide overflow rule. Then remove borders and background colors: spacing and source order should still communicate grouping. This pass turns the box model from a diagram into a repeatable debugging method.

Finally, compare the measured box in two engines at the same viewport and font settings. Small rounding differences are normal; clipped text, hidden focus, or page-level scrolling are not. Record the content that caused the failure so a later regression test preserves the pressure instead of only the ideal card.