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-sizi