Marcus VBP

O bom entendimento do modelo de caixa CSS é essencial para a construção de layouts baseados em folhas de estilo. Este conceito se baseia no princípio de que qualquer elemento HTML pode ser uma caixa.

Por exemplo, imagine um elemento HTML qualquer é formatado para possuir dimensões fixas de 150x150 pixels. Isso é feito sem problemas usando as propriedades width e height. Posteriormente esta caixa é incrementada, e é adicionado uma margem interna de 10 pixels (através do atributo padding) e uma borda tracejada superior e inferior (atributos border-top e border-bottom, respectivamente), de 3 pixels de largura. Também é adicionada uma margem externa inferior (através do atributo margin-bottom) de 20 pixels ao elemento.

Fazer isso em folhas de estilos é trivial, mas ao visualizar o resultado em um navegador, percebe-se que as dimensões originais de 150x150 pixels foram alteradas. Medindo o elemento utilizando uma regra de pixels observa-se que as dimensões finais da
caixa são de 170x196 pixels.

Isto ocorreu porque os valores das propriedades margin, padding e border (e suas variações específicas para cada lado da caixa) adicionam valores à largura e altura finais da caixa. Para se obter as dimensões ideais da caixa é necessário subtrair os valores destas propriedades da largura e altura que se almeja aplicar. No caso do exemplo acima, o valor da propriedade width (largura) seria 130 pixels, e o valor da propriedade height (altura) seria de 104 pixels.

Pode-se inclusive fazer uso de uma pequena equação do primeiro grau para se obter as dimensões ideais:

LARGURA IDEAL = VD – ( (BD + BE) + (PD + PE) + (MD + ME) )

Sendo que: VD é igual ao valor desejado da largura; BD e BE são respectivamente a largura da borda esquerda e direita; PD e PE são respectivamente o valor da margem interna esquerda e direita; e MD e ME são respectivamente os valores da margem externa direita e esquerda.

A fórmula para a altura ideal é a mesma, apenas alterando os valores para as margens/bordas/margens externas inferiores e superiores.

Praticamente todas as versões do navegador web Internet Explorer possuem defeitos na renderização de caixas CSS. A versão 6 deste navegador é o navegador mais utilizado do planeta. Versões mais antigas, inferiores à 6, possuem defeitos no box model muito mais graves, mas felizmente estas versões estão em quase completo desuso.