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.

Através do calc o CSS consegue realizar operações matemáticas para definir a largura ou altura de uma caixa

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.