• Home
• Bruno Carlos
• Tutoriais

O Modelo de Caixas (box model) em CSS

A facilidade com que é possível criar uma página web continua a levar pessoas sem conhecimentos técnicos a produzir sites sem qualidade e sem qualquer estrutura, que permita uma evolução progressiva do mesmo.
Já aqui disponibilizei no blog 2 artigos - Como escrever HTML de forma correcta e Documento de Especificações para desenvolvimento Web - aos quais aconselho uma leitura atenta para quem pretende iniciar a construção de um website, mas possui poucos conhecimentos relativamente ao desenvolvimento web.

Este artigo centra-se no termo “modelo de caixas” (em inglês “box model”). É verdade que muitas pessoas utilizam este modelo em layouts construidos com base em CSS, no entanto nem todas as pessoas compreendem o seu significado nem a sua tremenda importância.

Um elemento HTML pode ser considerado uma caixa (box), deste modo o box model aplica-se a todos os elementos HTML (e XHTML).

O box model é a especificação que define como o elemento e os seus atributos se relacionam entre si. Podemos dizer que o box model diz aos browsers que uma box tem de largura 100 pixels e de altura 50 pixels, portanto terá de ser apresentada de acordo com estas especificações.

O box model detalha as opções de ajuste de margem (margin), contorno (border), espaçamento interno (padding) e conteúdo (content) para cada elemento.

Como é possível visualizar através da imagem uma box é constituida por partes distintas. A margin é invisível, não possui cor de fundo e não esconde elementos. O border permite visualizar os limites visíveis da box. O padding define o espaço entre o conteúdo e o border. De notar que a única parte visível da box apresentada na imagem seria o border, portanto toda a zona a tracejado não estaria visível.

Quando definimos a largura e a altura de uma box utilizando CSS, estamos a definir a área de conteúdo e não a soma de todos os elementos (content, padding, border e margin). Para calcular o espaço total de uma box é necessário obter a largura e altura do conteúdo e somar o padding, border e margin.

box{
    width: 200px;
    border: 10px solid #ccc;
    padding: 20px;
    margin: 20px;
}

O exemplo anterior define uma box que ocupa um total de 300 pixels em termos horizontais, no entanto apenas 200 pixels são ocupados pelo conteúdo.

Na figura anterior, a área a azul tem uma largura total de 240 pixels (200 pixels do conteúdo mais os 20 pixels de padding de cada lado). O border tem 10 pixels, tanto na direita como na esquerda, o que faz um total de 260 pixels. Como a margin é de 20 pixels em cada lado, perfaz um total de 300 pixels.

Compatibilidade
Toda esta teoria é de facto simples de perceber, faria todo o sentido todos os browsers respeitassem estas regras certo? Na verdade não é bem isso que acontece, nem todos os browsers tratam o box model de forma idêntica. Portanto é necessário conhecer a forma como estes interpretam as boxes e conhecer a forma para ultrapassar os problemas apresentados.

Os browsers mais recentes já não apresentam problemas com as boxes e apresentam-nas de forma correcta, ou seja Opera 6+, Firefox, Internet Explorer 5 para Mac, o Internet Explorer 6 (se o Document Type Definition estiver especificado de forma correcta) e o Internet Explorer 7+.

O problema existe realmente devido ao Internet Explorer 5 que em vez de considerar apenas a largura do conteúdo, utiliza a propriedade largura como a soma da largura do conteúdo, padding e border. Ou seja no exemplo anterior o browser iria considerar que a largura total da box seria de 240 pixels, pois identificava os atributos padding e border como fazendo parte dos 200 pixels, ou seja retira espaço ao conteúdo em vez de somar.
Uma das formas de evitar que isto aconteça passa por procurar evitar adicionar padding a boxes que tenham uma largura fixa, procurando adicionar margins ou paddings aos elementos pai ou filho.

No próximo artigo irei utilizar este box model para explicar os Modelos de Posicionamento em CSS. Fiquem atentos, ou se preferirem subscrevam os artigos do blog via RSS para estarem actualizados.

Partilhar esta Entrada

Gostou do artigo? Deixe um comentário no formulário abaixo para continuar a troca de ideias, ou subscreva o blog por RSS e receba os artigos assim que eles são publicados no seu leitor preferido.

Copyright Vida e Tecnologia | Alguns Direitos Reservados |Powered by WordPress | Deep Blue Theme