Há alguns anos a maior parte dos sites era construído com o recurso de tabelas da HTML. Na verdade acredito que, no Brasil, ainda seja assim, mas felizmente isso está mudando. Eu não prentendo descrever neste post as vantagens e desvantagens de usar ou não este recurso. Minha idéia é esclarecer o CSS Box model que é o alicerce da construção de sites sem o uso de tabelas.

O CSS Box model, de forma resumida, é uma definição de como deve se comportar ou aparecer um elemento retangular em uma página Web. Até aí, nada de interessante. O que você precisa visualizar é que um retângulo que faz parte de um documento HTML tem algumas propriedades a mais do que aquelas que você aprendeu em geometria, ou seja, largura e altura.

Além da largura e da altura citadas, você ainda tem borda, margem e uma área de respiro interno do retângulo. Abaixo coloco uma imagem detalhada para melhor visualização.

Olhando para a imagem acima, apesar da quantidade de informação, é possível identificar com clareza todas as medidas que você pode vir a usar quando definir um box. Agora o grande problema: se você quer ter um box exatamente como o da figura, como deve fazer?

Por definição, a largura do box é dada através da soma das margens laterais com as bordas laterais mais a área de respiro. Para conseguirmos chegar aos 250 píxels de largura contando com a margem externa, teríamos que definir a largura do box em 208 píxels. Veja abaixo a conta para chegar nesta largura:

250px -
10px - (margin-left)
1px - (border-left)
10px - (padding-left)
10px - (padding-right)
1px - (border-right)
10px (margin-right)
—–
208px

Pronto, considerando que você tenha declarado todas as propriedades iguais as da figura, você tem um box com 250 píxels de largura. Agora a dica mais importante. Para que isso valha, ou seja, para que essa definição seja seguida pelos browsers, é necessário que você informe para o browser que ele deve interpretar o HTML usando a definição correta do CSS Box model. Se você não fizer isso, o Internet Explorer, como exemplo, não vai levar isso em consideração e vai fazer os cálculos de forma diferente.

E como se informa para o browser como ele deve renderizar o HTML? Você consegue fazer isso através de uma tag que fica logo no começo do arquivo. É o famoso, ou não tão famoso assim, DOCTYPE. É com ele que você informa aos navegadores como eles devem interpretar o conteúdo do documento.

Partindo das informações acima, recomendo que vocês dêem uma boa pesquisada sobre os DOCTYPES e que façam testes. Abra seu editor de texto preferido e tente colocar em prática tudo o que você viu aqui, é só dessa forma que você vai se habituar com as variações entre os navegadores.