Introdução às Dimensões

Nesta aula, exploraremos como controlar as dimensões, ou seja, a altura e a largura dos elementos HTML usando CSS.

Altura (Height): Refere-se à medida vertical de um elemento, de cima para baixo.

Largura (Width): Refere-se à medida horizontal de um elemento, da esquerda para a direita.

1. Propriedades CSS height e width

Ensinamento: São usadas para definir explicitamente a altura e a largura da área de conteúdo de um elemento HTML.

Importante: Essas propriedades não incluem padding (preenchimento interno), border (borda) ou margin (margem) por padrão. Elas definem apenas o espaço para o conteúdo real.

Valores Possíveis para height e width:

  • auto: Valor padrão. O navegador calcula a altura/largura com base no conteúdo do elemento.
  • length (Comprimento): Define a altura/largura usando unidades fixas ou relativas (ex: px para pixels, cm para centímetros, em, rem).
  • % (Porcentagem): Define a altura/largura como uma porcentagem do tamanho do bloco que contém o elemento (elemento pai).
  • initial: Define a propriedade para seu valor padrão (auto).
  • inherit: O elemento herda o valor height ou width de seu elemento pai.

Exemplo Prático (height, width):

Código: p { height: 200px; width: 50%; }

Ensinamento: Define a altura de todos os parágrafos (<p>) para 200 pixels e a largura para 50% da largura do elemento pai que os contém.

2. Propriedade max-width

Ensinamento: Define a largura máxima que um elemento pode ter. Impede que o elemento se torne mais largo que o valor especificado, mesmo que a propriedade width seja maior ou o conteúdo precise de mais espaço.

Comportamento: Se o conteúdo for menor, max-width não tem efeito. Se o conteúdo for maior, ele pode ajustar a altura ou transbordar (dependendo de outras propriedades como overflow).

Prioridade: max-width sobrescreve a propriedade width.

Valores: length, %, none (sem limite máximo – padrão), initial, inherit.

Uso: Muito útil para design responsivo, garantindo que elementos não fiquem excessivamente largos em telas grandes e evitando barras de rolagem horizontais indesejadas em telas pequenas.

3. Propriedade min-width

Ensinamento: Define a largura mínima que um elemento pode ter. Impede que o elemento se torne mais estreito que o valor especificado, mesmo que a propriedade width seja menor ou o conteúdo precise de menos espaço.

Comportamento: Se o conteúdo for maior, min-width não tem efeito.

Prioridade: min-width sobrescreve a propriedade width.

Valores: length, %, initial (valor padrão é 0), inherit.

4. Propriedade max-height

Ensinamento: Define a altura máxima que um elemento pode ter. Impede que o elemento se torne mais alto que o valor especificado.

Comportamento: Se o conteúdo for maior que max-height, ele transbordará (overflow). A propriedade overflow controla como esse transbordamento é tratado. Se o conteúdo for menor, max-height não tem efeito.

Prioridade: max-height sobrescreve a propriedade height.

Valores: length, %, none (sem limite máximo – padrão), initial, inherit.

5. Propriedade min-height

Ensinamento: Define a altura mínima que um elemento pode ter. Impede que o elemento se torne mais baixo que o valor especificado.

Comportamento: Se o conteúdo for maior, min-height não tem efeito.

Prioridade: min-height sobrescreve a propriedade height.

Valores: length, %, initial (valor padrão é 0), inherit.

6. Propriedade overflow (Relacionada a max-height e max-width)

Ensinamento: Especifica o que acontece quando o conteúdo de um elemento é maior que sua caixa (definida por height/width ou limitada por max-height/max-width). Funciona melhor em elementos de bloco com altura definida.

Valores:

  • visible (Padrão): O conteúdo transborda e é renderizado fora da caixa do elemento.
  • hidden: O conteúdo que transborda é cortado (escondido). Não há barra de rolagem.
  • clip: Semelhante a hidden, mas proíbe qualquer tipo de rolagem (programática ou do usuário).
  • scroll: O conteúdo que transborda é cortado, mas barras de rolagem (horizontal e vertical) são adicionadas para permitir a visualização do restante, mesmo que não sejam necessárias.
  • auto: Barras de rolagem são adicionadas apenas se o conteúdo transbordar.
  • initial: Define como visible.
  • inherit: Herda o comportamento do elemento pai.

Materiais utilizados

Vídeo aula

4 pessoas já terminaram essa aula, agora é sua vez!