Box Model

Il Box Model CSS

Ogni elemento nella pagina è un rettangolo composto da quattro strati: content, padding, border e margin. Capire il box model è la base per controllare dimensioni e spaziature.

I quattro strati

.card {
  /* Contenuto: larghezza e altezza */
  width: 300px;
  height: 200px;

  /* Padding: spazio interno tra contenuto e bordo */
  padding: 20px;

  /* Border: il contorno visibile */
  border: 2px solid #ccc;

  /* Margin: spazio esterno tra l'elemento e i vicini */
  margin: 16px;
}

box-sizing: border-box

Per default, width e height si riferiscono solo al contenuto. Con border-box, padding e border sono inclusi nella dimensione totale.

/* Applica border-box a tutti gli elementi */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Margin collapsing

Quando due margini verticali si toccano, non si sommano: vince il più grande. Questo comportamento si chiama margin collapsing.