Nessa aula rápida, vamos abordar como podemos modificar a altura e largura no CSS facilmente.

Quando estamos criando o layout de nossa página web precisamos sempre redimensionar os elementos de acordo com o visual que queremos dar para nossa página.

Para modificarmos as dimensões altura e largura dos elementos utilizamos as propriedades height e width, respectivamente.

Height

O comando height é responsável por modificar a altura de um elemento. Geralmente a altura dos elementos é baseada no espaço que seu conteúdo está ocupando.

Se criarmos por exemplo um parágrafo (p) ou uma div e não configurarmos um valor de height, vamos perceber que a altura do elemento vai acompanhando o conteúdo. Quanto mais conteúdo tiver maior a altura do elemento.

Quando damos um valor de height, fixamos a altura do elemento. Para modificarmos a altura do elemento <div id=”teste”>conteúdo</div> usamos:

Largura

Os elementos do HTML podem ser do tipo “block” ou “inline”. Sabemos que quando o elemento é do tipo block a largura dele é a largura inteira do seu elemento pai.

Podemos fazer com que um elemento block como por exemplo a div que usamos anteriormente, não tenha a largura inteira do elemento pai, basta atribuir um valor de width para a div. Para fixar uma largura do exemplo acima fazemos:

Se você fez esse teste acima viu que a largura da div ficou 500px. Mas se adicionar por exemplo outra div após a div “#teste” vai perceber que ela foi mostrada abaixo da div teste. Por que isso acontece?

Por mais que tenhamos modificado a largura da primeira div (#teste) para 500px, o elemento por ser block não vai permitir que outro novo elemento seja mostrado ao lado dele, futuramente vamos ver como deixar elementos lado a lado com “float”.

Vale lembrar que nos exemplos que vimos aqui para modificar altura e largura no CSS utilizamos a unidade de medida pixel, mas poderíamos também usar outras unidades de medidas como por exemplo o percentual.