Esta é uma das primeiras coisas que você deve estar completamente familiarizado. Felizmente, o modelo de box não é uma coisa difícil de entender, e geralmente funciona da mesma maneira em todos os browsers, exceto em circunstâncias relacionadas com determinadas versões do Internet Explorer.
O modelo de box CSS é responsável pelos seguintes cálculos:
- Quanto espaço o box ocupa
- Quer ou não bordas ou margens
- Dimensões do box
- Em certa medida, uma posição de caixa em relação a outro conteúdo na página
Algumas coisas importantes para se manter em mente:
- Se uma caixa tem sua largura definida como “100%”, não deve ter qualquer margens, padding, ou bordas, caso contrário ele irá ultrapassar seu elemento pai
- Verticalmente as margens podem causar alguns problemas complexos que e podem danificar seu layout
- Elementos posicionados relativamente ou absolutamente irá se comportar de maneira diferente.
As regras e os princípios acima referidos são apresentados sob a suposição de que a exploração dos os elementos é processada no modo padrão
O modelo de box acima foi retirado do plugin FireBug do browser FireFox