CSS: Controlando o tamanho das caixas

Anteriormente nesta matéria falamos sobre como os elementos em uma página web podem ser vistos como se estivessem dentro de caixas.

Para controlar a aparência das caixas precisamos conhecer as suas diversas propriedades.

Confira nesta aula o exemplo que usaremos neste curso.

Height e width são propriedades das caixas.

Geralmente, as caixas em uma página se expandem ou contraem dependendo do espaço disponível para elas. Esse é um comportamento padrão.

Uma caixa pode aparentar não reter mais o seu conteúdo caso a altura ou largura dela se torne menor do que a dele.

Existem alguns casos em que a largura ou altura de um elemento precisa variar de acordo com o tamanho da tela do usuário. Nesses casos utilizamos as unidades de medida: %, vh e vw que veremos melhor nesta aula.

Como mencionado na aula anterior, quando uma caixa é menor do que o seu conteúdo, a impressão que temos é que o mesmo está saltando de dentro dela.