box-sizing

Nel corso delle generazioni, ci siamo resi conto che la matematica non è divertente, per cui una nuova proprietà chiamata box-sizing è stata creata. Quando imposti box-sizing: border-box; su un elemento, il padding e i bordi di quell'elemento non aumenteranno più la sua larghezza. Ecco lo stesso esempio della pagina precedente, ma con box-sizing: border-box; su entrambi gli elementi:

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Giacché questo metodo è di gran lunga migliore, alcuni autori preferiscono che tutti gli elementi delle loro pagine si comportino in questa maniera. Tali autori usano il seguente codice CSS per le loro pagine:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Ciò garantisce che tutti gli elementi siano sempre dimensionati in questa maniera più intuitiva.

Dato che box-sizing è abbastanza nuovo, per adesso dovresti usarlo con i prefissi -webkit- e -moz-, come ho fatto in questi esempi. Questa tecnica attiva le funzionalità sperimentali specifiche per i browser. Tieni a mente che è per IE8+.