Box model

Ogni elemento genera una o più scatole: content box, padding, border e margin. box-sizing: border-box include padding e bordo nella larghezza dichiarata, utile per layout prevedibili.

width/max-width e margin: auto aiutano a centrare blocchi.

Esempio

*, *::before, *::after { box-sizing: border-box; }
.panel {
  width: min(100%, 40rem);
  margin-inline: auto;
  padding: 1rem;
  border: 1px solid #ccc;
}