Facilite a sua vida com Box-Sizing

Este post é para você que sofre na hora de alinha sua galeria de fotos, seus box de noticias, menus e fica que brando a cabeça somando, largura, borda, padding. Seus dias de sufoco acabaram! 

De acordo com o Box Model padrão das CSS, as propriedades width e height definem as dimensões da área de conteúdo do boxes criado pelos elementos HTML.

As dimensões finais do box (largura x altura) são o resultado da soma dos valores das propriedades width, padding e border.

div {
  width: 50px; /* largura do box */
  padding: 0 10px; /* padding à esquerda e à direita */
  border: solid red;
  border-width: 0 5px; /* borda à esquerda e à direita */
}

Segundo o Box Model padrão das CSS, o elemento terá:
(50px + 2x10px + 2x5px) 80px de largura.

Esse é o comportamento padrão do Box Model CSS, ou seja, as três propriedades se somam para determinar o tamanho final do elemento.

Para solucionar este problema nos utilizamos o atributo box-sizing, a CSS3 criou a propriedade box-sizing que quando declarada com uso do valor border-box altera a forma como o Box Model é calculado, incorporando os valores de padding e border à largura do box criado pelo elemento HTML.

Veja um pouco mais no vídeo abaixo:

 

Código do vídeo
.box1,.box2{ box-sizing: border-box; }

.box1 {
  background:#ddd;
  width: 250px; /* largura do box */
  height: 50px; /* altura do box */
  margin-bottom: 10px; /* margem a baixo do elemento */
}
.box2{
  background:#ddd;
  width: 250px; /* largura do box */
  height: 50px; /* altura do box */
  padding: 0 50px; /* padding à esquerda e à direita */
}

Veja a documentação do Box Model aqui

Até a próxima, espero que tenham gostado, comentem suas duvidas
e também as novidades, deixe seu comentário.