Por padrão as propriedades width e height não definem o tamanho final dos elementos HTML. Isso porque o tamanho final do elemento vai ser calculado com a soma das propriedades width, padding e border, por exemplo.
Considerando um elemento onde você aplique as seguintes propriedades:
- Largura (width) de 50%;
- Padding (right e left) de 5%;
- Border (right e left) de 1%;
- Você terá no final um elemento com 62% de largura.
Esse é comportamento padrão Box model, ou seja, as propriedades se relacionam para determinar o tamanho final do elemento.
Vantagem do box-sizing
Existe no CSS a propriedade Box-sizing com o valor border-box que altera a forma de como o Box Model é calculado, assim o padding e border são incorporados à largura do elemento. Dessa forma garantimos que o elemento terá uma largura de 50%.
Essa propriedade CSS facilita as contas e deixa os números mais claros, assim você não precisa ficar calculando o tamanho total do elemento.
Considerando que você deseja posicionar dois elementos divs um ao lado do outro com um espaçamento interno (padding) de 5%, e que a soma dos dois ocupem toda a largura da página:
Seu CSS ficaria assim:
div {
float: left;
width: 50%;
padding:5%;
}
Para sua surpresa o layout quebra, pois a largura total das divs será de 60% . Essa questão é resolvida usando o box-sizing: border-box. Ela garante que a largura será de 50%.
Use box-sizing em todos os seus projetos. Aplique o seletor universal, assim:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Suporte nos navegadores
Internet Explorer tem suporte até a versão do IE8. Em um caso muito raro você precisar tem um polyfill para box-sizing pra IE6 e IE7.
Confira o suprote a todos navegadores no link: http://caniuse.com/#feat=css3-boxsizing
Curta a página do blog kadunew no Facebook. Siga-me no Twitter: @kadunew.