CSS: A importância do box-sizing em suas páginas

03

O box model padrão nos navegadores foi um dos elementos mais mal elaborados da história do HTML e CSS. Mas com o “box-sizing” você vai resolver esse problema, e o melhor: É compatível com todos os navegadores, inclusive o IE8!

Todo elemento HTML é uma caixa e controlamos a sua largura com width, altura com height, borda com border, margens internas com padding e margens externas com margin, como você já deve saber. A forma como todos esses elementos se relacionam no código para determinar a forma final do elemento é chamado de Box model. Porém, uma das coisas mais confusas para quem desenvolve é entender (e calcular) a diferença que as margens e bordas causam no tamanho final do elemento.

css box-sizing

css box-sizing

Por exemplo: Se você criar uma caixa de 500 pixels de largura e definir que este elemento terá borda de 1 pixel, o tamanho final do elemento, será na realidade, 502 pixels de largura. Isso porque, tradicionalmente, adiciona-se à conta os 2 pixels da borda. O mesmo ocorre com as margens. Se você definir que o elemento terá margens internas de 5 pixels (padding: 5px;), a largura final do elemento (incluindo a borda) será de 512 pixels. Isso é ruim, pois imagine se ao invés de trabalhar com pixels na largura desse elemento, você utilizasse porcentagem? Se o elemento for definido com uma largura de 100%, ele passará sempre em 12 pixels sua largura total. Isso pode destruir seu layout.

AS ALTERNATIVAS

Uma das alternativas seria a utilização do calc, de modo que permita-se ao CSS calcular o valor exato a ser reduzido da largura final do elemento. Por exemplo:

Porém, o recurso calc não é suportado por todos os browsers. Somente no Firefox, Chrome e IE atuais. No Safari já não funciona, por exemplo.

Portanto, o correto é a utilização do box-sizing:

Dessa forma, se você definir que o elemento terá 100% de largura, ele ocupará o 100% de seu container, mesmo que tenha margens e bordas. Simples não é? Então acostume-se a utilizá-lo.

Leave a Reply

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *