10 de novembro de 2007

Dominando o Box Model

O artigo de hoje é sobre o Box Model, um conceito muito importante pra quem estiver desenvolvendo qualquer coisa um pouco mais interessante com CSS.

Os browsers, ao desenhar uma página web, tratam todos os elementos HTML (e XHTML) como se fosse uma caixa, com altura e largura. Essas dimensões (altura e largura) são afetadas por diversas propriedades CSS. O box model é exatamente isso, a especificação de como os browsers devem renderizar os elementos HTML.



Como você pôde perceber, um elemento é composto de 4 partes distintas.

A parte externa é a margem, que separa uma caixa de outra. Você pode ajustar as margens dos elementos através da propriedade margin.

Além da margem, existe a borda, que é a parte visível que fica envolta do elemento. A borda é ajustada com a propriedade border.

O espaço que separa o conteúdo da borda é chamado de "espaçamento" e é controlada pela propriedade padding.

O conteúdo, é a parte mais importante de qualquer elemento. É ai que aparece o que realmente importa, os textos, imagens, vídeos, etc. Nos browsers que interpretam o box model corretamente, essa parte é controlada pela propriedade width.

O espaço total que um elemento ocupa em uma página não é definido apenas pelas propriedades width e height, mas sim pela soma dos valores das propriedades padding, border, margin e width/height.

Para reforçar o que você aprendeu hoje, use essa demonstração interativa sobre o Box Model.

Referencias:
I Love Jack Daniels
Maujor
Simon Willison


Tags:


0 comentários: