il box model

Quando parliamo di larghezza, dovremmo parlare del suo più grande limite: il box model. Quando imposti la larghezza di un elemento, l'elemento potrebbe in effetti apparire più grande del valore impostato: i bordi e il padding dell'elemento, lo allargheranno oltre il valore specificato. Guarda l'esempio seguente, in cui due elementi con lo stesso valore di width finiscono per avere differenti misure.

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

Per generazioni, la soluzione a questo problema è stata la matematica. Gli autori di CSS hanno sempre scritto valori di larghezza più piccoli di quelli che avrebbero voluto, sottraendo il padding e i bordi. Fortunatamente, tu non devi più farlo...