Skip to main content

CSS Box Model and Spacing

Every element is a box made from content, padding, border and margin.

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

.card {
  max-width: 42rem;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  margin-block: 1rem;
}

With border-box, declared width includes padding and border.

Use padding inside a component and margin between components. Prefer relative units such as rem for scalable spacing.

Avoid fixed layouts

Large fixed widths can overflow small screens. Combine width: 100% with a suitable max-width.

Check

  • Global border-box rule is present.
  • Spacing has a consistent scale.
  • Content does not touch borders.
  • Page has no horizontal scrolling at narrow widths.
Back to top