freeCodeCamp/guide/portuguese/css/height-and-width-dimensions/index.md

title	localeTitle
Height and Width Dimensions	Dimensões de altura e largura

Dimensões de altura e largura

Definição

Os programadores podem usar as propriedades height e width para alterar a altura e a largura de elementos específicos. Para que suas dimensões sejam alteradas, o valor da propriedade de display desses elementos deve ser definido como block ou inline-block .

Sintaxe

Altura:

• height: auto|length|initial|inherit;
• min-height: length|initial|inherit;
• max-height: none|length|initial|inherit;

Largura:

• width: auto|value|initial|inherit;
• min-width: length|initial|inherit;
• max-width: none|length|initial|inherit;

Uso e Exemplos

Todas as propriedades mencionadas acima só podem ter um valor.

Altura:

A propriedade height define a altura exata de um elemento. O valor auto é o padrão e permite que o navegador defina automaticamente a altura. Isso geralmente é determinado pela quantidade de espaço vertical que o conteúdo de um elemento ocupa. O comprimento da altura pode ser definido como fixo em px , relativo à altura do elemento pai mais próximo usando a unidade % , ou relativo à altura da janela de visualização usando a unidade vh . O valor initial terá o mesmo efeito que o valor auto enquanto o valor inherit dará ao elemento a mesma altura que o elemento pai mais próximo.

Exemplo:

<p id="red">Example text</p> 

p#red { 
    margin: 0; 
  background-color: red; 
  height: 50vh; 
    line-height: 50vh; 
    text-align:center; 
 } 

Resultado: O exemplo acima usa a unidade vh para definir a altura. Esta unidade é usada para definir a altura de um elemento em relação à altura da janela de visualização. Nesse caso, o parágrafo vermelho recebe uma altura de metade da altura da viewport, de modo que ocupa 50% da tela. Nota: Todas as margens padrão devem ser removidas do corpo para que o resultado apareça como deveria.

A propriedade min-height define a altura mínima que um elemento deve ter. Essa propriedade é útil ao redimensionar verticalmente uma página, pois o programador pode impedir que um elemento diminua demais e não apareça bem. O valor padrão da min-height de um elemento é definido como 0. O código CSS abaixo impediria que o parágrafo com um ID de exemplo fosse reduzido para menos de 400 px de altura.

Exemplo:

p#example { 
  min-height: 400px; 
 } 

A propriedade max-height define a altura máxima que um elemento pode alcançar. Isso pode ser útil quando você não deseja que um elemento seja maior que um tamanho específico. Se o conteúdo do elemento tiver uma altura maior que o valor de max-height , o conteúdo será excedido.

Exemplo:

p { 
  max-height: 40px; 
  background-color: red; 
 } 

Resultado:

Largura:

As explicações da propriedade de largura CSS são exatamente as mesmas que as propriedades de altura, exceto que alteram a largura de um elemento. Portanto, mostrarei apenas alguns exemplos do uso dessas propriedades abaixo.

Exemplo:

p { 
  width: 150px; 
  background-color: red; 
 } 

Resultado:

Nota: O conteúdo não transborda para a direita, apenas ocupa a largura especificada e, em seguida, interrompe a próxima linha.

Exemplo:

p { 
  min-width: 50px; 
 } 

O código acima simplesmente não permitirá que um elemento de parágrafo encolha horizontalmente para menos de 50 px.

Exemplo:

p { 
  max-width: 300px; 
  background-color: red; 
 } 

O código acima não permitirá que a largura de um elemento seja maior que 300px.

Espero que este artigo tenha ajudado você a se familiarizar com as dimensões de altura e largura do CSS. Eu incluí alguns links abaixo, se você quiser ler mais sobre essas propriedades.

Mais Informações:

• Dimensões de altura e largura CSS: https://www.w3schools.com/css/css_dimension.asp
• Propriedade de altura do CSS: https://www.w3schools.com/cssref/pr dim height.asp
• Propriedade de largura do CSS: https://css-tricks.com/almanac/properties/w/width/
• Comprimentos de CSS: https://developer.mozilla.org/pt-BR/docs/Web/CSS/length