Altura e Largura do CSS

A largura deste elemento é de 100%.

CSS define altura e largura

height e width A propriedade é usada para definir a altura e largura do elemento.

As propriedades height e width não incluem margem interna, borda ou margem externa. Elas definem a altura ou largura da área interna da margem, borda e margem do elemento.

Valores de altura e largura do CSS

height e width A propriedade pode ser configurada com os seguintes valores:

  • auto - Padrão. O navegador calcula altura e largura.
  • length - Define altura/largura usando px, cm, etc.
  • % - Define altura/largura usando porcentagem do bloco contido.
  • initial - Define altura/largura como valor padrão.
  • inherit - Herda altura/largura do valor do pai.

Exemplos de CSS de altura e largura

A altura deste elemento é de 200 pixels e a largura é de 50％

Exemplo

Defina a altura e largura do <div> elemento:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Experimente você mesmo

A altura deste elemento é de 100 pixels e a largura é de 500 pixels.

Exemplo

Defina a altura e largura de outro <div> elemento:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Experimente você mesmo

Atenção:Lembre-se de queheight e width A propriedade não inclui margem interna, borda ou margem externa! Elas definem a área interna da margem, borda e margem do elemento.

Definir max-width

max-width A propriedade é usada para definir a largura máxima do elemento.

Pode ser especificado usando valores de comprimento (por exemplo, px, cm, etc.) ou porcentagem do bloco contido (％), ou pode ser definido como none (valor padrão. Significa que não há largura máxima).

Quando a janela do navegador é menor que a largura do elemento (500px), ocorre o efeito que vimos anteriormente <div> problemas. Então, o navegador adicionará uma barra de rolagem horizontal à página.

Neste caso, use max-width Pode melhorar o tratamento do navegador para janelas pequenas.

Dica:Arraste a janela do navegador para uma largura menor que 500px para ver a diferença entre os dois div!

A altura deste elemento é de 100 pixels, e a largura máxima é de 500 pixels.

A altura deste elemento é de 100 pixels, e a largura máxima é de 500 pixels.

Observação:max-width O valor da propriedade substituirá width(largura).

Exemplo

A altura deste <div> é de 100 pixels, e a largura máxima é de 500 pixels:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Experimente você mesmo

Mais exemplos

Definir a altura e largura do elemento
Este exemplo demonstra como definir a altura e largura de diferentes elementos.
Usar porcentagens para definir a altura e largura da imagem
Este exemplo demonstra como usar porcentagens para definir a altura e largura de uma imagem.
Definir a largura mínima e máxima do elemento
Este exemplo demonstra como usar valores de pixels para definir a largura mínima e máxima de um elemento.
Definir a altura mínima e máxima do elemento
Este exemplo demonstra como usar valores de pixels para definir a altura mínima e máxima do elemento.

Definir propriedades de tamanho CSS

Propriedade Descrição
height Definir a altura do elemento.
max-height Definir a altura máxima do elemento.
max-width Definir a largura máxima do elemento.
min-height Definir a altura mínima do elemento.
min-width Definir a largura mínima do elemento.
width Definir a largura do elemento.