Lição 12: Altura e largura

Atribuindo largura [width]

A propriedade width destina-se a definir a largura de um elemento.

O exemplo a seguir constrói um box dentro do qual podemos digitar um texto:

  div.box {   width: 200px;   border: 1px solid black;   background: orange;  }    

• Ver exemplo

Atribuindo altura [height]

No exemplo acima a altura será determinada pelo conteúdo inserido no box. Você pode definir a altura de um elemento com a propriedade height. Como exemplo, vamos fazer a altura do box anterior igual a 500px:

  div.box {   height: 500px;   width: 200px;   border: 1px solid black;   background: orange;  }    

• Ver exemplo

Sumário

Nas Lições9, 10, 11 e 12 você aprendeu os fundamentos do box model em CSS. Como podemos notar o box model fornece uma série de novas opções de estilização. Até agora, você deve ter usado tabelas para criar seus layouts, porém com CSS e o box model você, a partir de agora, estará capacitado a criar layouts mais elegantes, precisos e em conformidade com as recomendações do W3C.