pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

CSS com box-sizing: border-box

| 0 Comentários

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;
}
Porém, não esqueça: aplicar box-sizing em um projeto já pronto certamente irá quebrar seu layout. Sendo assim você terá que recalcular as medidas dos elementos novamente.

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.

Categorias: CSS |

Deixe uma resposta

Campos obrigatórios *.



*

Topo