# CSS Box Model and Spacing

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

~~~css
*,
*::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.