o box model

Enquanto falamos sobre width, devemos falar também sobre algumas advertências sobre a mesma: o box model. Quando configura a largura de um elemento, o elemento pode eventualmente aparecer maior do que o especificado: a fronteira do elemento e espaçamento irão esticar para lá da largura especificada. Observa o seguinte exemplo, onde dois elementos com o mesmo valor de largura acabam por resultar em diferentes tamanhos.

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

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

Durante gerações, a solução para este problem tem sido a matemática. Autores de CSS tentaram sempre escrever apenas o valor mais pequeno da largura pretendida, subtraingo o preenchimento e fronteira. Felizmente, já não tens de continuar a fazer mais isto...