Tutorial – Utilizando Bordas CSS Sem Estragar o Layout da Página

Se você já desenvolveu alguma página para internet, você pode ter enfrentado alguns problemas ao colocar bordas em seus itens e ter um layout completamente distorcido.

Isto ocorre por que os navegadores entendem que as bordas no box model padrão do CSS são algo extra ao conteúdo e, portanto deve ser adicionada como algo a mais, sendo somados ao valor de largura e altura definido.

Assim se você possui uma div com largura de 200 pixels e adiciona uma borda de 10 pixels, esta div passa a ter uma largura total de 220 pixels (200 do conteúdo e 10 de cada lado para cada borda).

O resultado exibido é uma página desfigurada conforme a tela a seguir:

Para solucionar este problema, existe a propriedade CSS3 chamada box-sizing. Esta propriedade define como a caixa de conteúdo definida pelo componente em uso entenderá os valores de padding, margin, border e o próprio conteúdo.

Assim a mesma div com largura de 200 pixels ao ter adicionada uma borda de 10 pixels, esta div continua a ter uma largura total de 200 pixels, porém o conteúdo é reajustado em uma área menor, ou seja, dos 200 pixels do conteúdo são subtraídos os 10 pixels de cada lado para cada borda, deixando uma área de 180 pixels de largura para o conteúdo.

Para isto é apenas necessário definir a seguinte propriedade nos elementos aos quais for adicionar uma borda.

box-sizing:border-box;

Para solucionar possíveis problemas com os navegadores antigos ou que ainda não suportam a propriedade padrão do CSS3, existem as variantes específicas de cada navegador, e que funcionam da mesma forma que a propriedade nativa  (para saber qual a compatibilidade da propriedade com os navegadores acesse http://caniuse.com/#feat=css3-boxsizing):

-moz-box-sizing

-webkit-box-sizing

Sendo assim a classe CSS para o procedimento mais abrangente ficaria da seguinte forma:

.box-model-fix

{

    -webkit-box-sizing:border-box;

    -moz-box-sizing:border-box;

    box-sizing:border-box;

}

E consequentemente o resultado gerado seria a figura a seguir:

Assim, utilizando desta simples propriedade, podemos utilizar as propriedades de margens sem medo algum e tornar nossos sites ainda mais completos e bonitos.

Obrigado!!