CSS box-sizing: Como adaptar as dimens�es de um elemento

Por padr�o, quando atribu�mos valores de border e padding a um elemento, eles s�o somados � largura e altura, fazendo com que as dimens�es totais superem os valores inicialmente esperados.

Utilizando a propriedade box-sizing do CSS3, podemos fazer com que os valores de border e padding sejam incorporados �s dimens�es originais do elemento, mantendo-o dentro dos limites informados em width e height.

Funcionamento

Para melhor compreender como os browsers definem as dimens�es finais dos elementos ao renderiz�-los, podemos nos basear nos seguintes c�lculos:

altura total = height + padding-top + padding-bottom + border-top-width + border-bottom-width;
largura total = width + padding-left + padding-right + border-left-width + border-right-width.

Considerando, por exemplo, um elemento com largura e altura iguais a 200px, bordas de 2px e padding igual a 10px, ao ser exibido na p�gina suas dimens�es finais seriam 224x224px (200+10+10+2+2px em ambas as direç�es, considerando os c�lculos citados acima). A Figura 1 ilustra esse exemplo, cujo c�digo CSS pode ser visto na Listagem 1.


div{
    width:200px;
    height:200px;
    border:2px solid black;
    padding:10px;
}

Listagem 1. Div com valores de padding e border

Figura 1. Dimens�es totais considerando padding e border

No lado esquerdo, temos a div com as dimens�es finais em destaque na parte de baixo. J� no lado direito, temos os detalhes sobre a composiç�o das dimens�es do bloco, visualizados a partir do mecanismo de inspeç�o do Google Chrome. Observe que o centro continuou com altura e largura iguais a 200, somados a 12px adicionais em todos os lados.

No entanto, em boa parte dos casos esse comportamento n�o � o esperado, tampouco o mais adequado. Em geral, quando atribui um valor �s propriedades de altura e largura, o desenvolvedor espera que essas sejam as dimens�es finais do elemento, mesmo ap�s a definiç�o do espaçamento interno (padding) e da borda.

Para atender a essa demanda, nas CSS3 foi inclu�da a regra box-sizing, que, uma vez definida, faz com que os valores de padding e border sejam incorporados �s dimens�es horizontal e vertical do elemento. Com isso, width e height passam a representar o tamanho total, independentemente das demais propriedades.

Sintaxe

A sintaxe, nesse caso, � bastante simples e resume-se � atribuiç�o do valor border-box � regra box-sizing, da seguinte forma:

box-sizing: border-box;

O outro valor poss�vel aqui � content-box, que gera o comportamento padr�o comentado anteriormente.

Na Listagem 2 apresentamos o exemplo anterior modificado, agora com o box-sizing. Seu resultado pode ser visto na Figura 2.


div{
    width:200px;
    height:200px;
    border:2px solid black;
    padding:10px;
    box-sizing: border-box;
}

Listagem 2. Utilizando a regra border-box

Figura 2. Dimens�es com box-sizing:border-box

Observe que dessa vez a parte central foi reduzida para 176x176px (200 - 12 - 12). Para ver esses exemplos em execuç�o, clique no bot�o abaixo:

Run

Clique aqui e veja mais exemplos criados pela comunidade DevMedia :)

CSS: box-sizing

Nesta documentação veremos como adaptar as dimensões de um elemento para incorporar os valores de border e padding, utilizando para isso a propriedade box-sizing.

Funcionamento

Sintaxe

Artigos relacionados