Dimensões

É possível determinar as dimensões (altura e largura) de todos os elementos (X)HTML. Dessa forma, pode-se criar, por exemplo, caixas com qualquer tamanho na página, modificar somente a altura de um elemento, alterar a largura de uma tabela, etc.

Veja, na Figura 7, como fica o exemplo anterior (Figura 6) quando colocamos uma largura de 250px e uma altura de 15% para o primeiro parágrafo.

As dimensões são definidas pelas propriedades listadas no quadro a seguir.

É necessário ter alguns cuidados ao utilizar essas propriedades, porque os espaçamentos definidos devem caber dentro das dimensões definidas.

Por exemplo, na Figura 7, você pode perceber que o primeiro parágrafo ultrapassa a caixa definida para ele e, além disso, o espaçamento de 80px que havia antes desapareceu (compare com a Figura 6). Isso ocorre porque a altura definida de 15% é insuficiente para caber o texto mais os espaçamentos de 20px superior e 80px inferior. Para solucionar um problema como este, é possível indicar no atributo de altura (height) o valor 'auto'. Com isto, caso o texto exceda o limite, o campo reservado para ele irá se adaptar para preencher o espaço que falta.

Dentre as inúmeras utilidades de se definir dimensões para os elementos, podemos citar a estilização de títulos e menus. Vamos ver um exemplo?

Na Figura 8, são ilustrados dois exemplos de títulos, nível 1 e nível 2, ambos foram estilizados para terem largura de 220px e espaçamento entre conteúdo e borda de 10px. Apesar de terem a mesma largura, o primeiro título aparenta ser mais largo porque possui bordas da direita e da esquerda com 20px, enquanto que o segundo título tem bordas com apenas 5px.