Lição 12: Altura e largura

Até agora ainda não fizemos qualquer consideração sobre as dimensões dos elementos com que trabalhamos. Nesta lição veremos como é fácil atribuir uma altura e uma largura para um elemento.

• width


• height

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.