Propriedade de altura em CSS explicou

A propriedade de altura ajusta a altura de um elemento ou pode dizer que se estende/aperta o elemento na direção vertical. Os elementos do bloco obtêm a altura de acordo com o conteúdo e se a altura precisar ser ajustada, a propriedade de altura deve ser usada.

Como a altura é uma das ações mais próximas do preenchimento, fronteira e margens. No entanto, nem os afeta nem obtém efeito por eles. Este guia descritivo fornece o trabalho e o uso de propriedades de altura no CSS com os seguintes resultados de aprendizagem:

• Trabalhando da propriedade de altura em CSS
• Uso de propriedades de altura no CSS
• a diferença entre altura e altura máxima/altura min

Como funciona a propriedade de altura no CSS

O trabalho de propriedade de altura no CSS depende da sintaxe fornecida abaixo:

Seletor Hight: Value;

O seletor pode ser qualquer elemento ou pode se referir à classe CSS na folha de estilo. O valor da altura pode ser definido em várias unidades de medição declaradas abaixo;

Comprimento: o comprimento (comprimento vertical) pode ser definido em unidades como PX, EM etc. O PX é o valor estático, enquanto o EM varia de acordo com o valor padrão do elemento pai. Como se a altura do corpo fosse definida como 20px (como uma altura padrão), seria equivalente a 1em.

Auto: este valor ajusta a altura de acordo com a configuração padrão do navegador

Porcentagem (%): a porcentagem do elemento principal é tomada como referência. Por exemplo, o valor de 50% ajustaria a altura para 50% (conforme a altura do elemento pai.)

Inicial: isso usa o valor da altura padrão

Herito: este valor busca a altura do elemento pai

O funcionamento da propriedade de altura no CSS depende principalmente da unidade de medição que está sendo usada.

Como usar a propriedade de altura no CSS

Esta seção fornece vários exemplos que demonstram a funcionalidade da propriedade de altura no CSS.

Exemplo 1: Usando comprimento/porcentagem de propriedade de altura

Este exemplo usa o valor do comprimento com várias unidades de medição e o seguinte código é praticado a esse respeito.

Ajustando a altura (usando comprimento e porcentagem)

A altura está em px

A altura está em porcentagem (%)

Altura em Em

A descrição do código é fornecida abaixo:

• criou três classes CC denominadas "prim", "sec" e "ter"
• A classe “Prim” considera a altura em “PX”, enquanto as classes “SEC” e “Ter” fazem uso de “%” e “Em” para o comprimento da altura (vertical)
• As três classes CSS são usadas em três parágrafos (que são criados no corpo)

A imagem do código acima é mostrada abaixo,

Saída:

Exemplo 2: Usando valores automáticos, herdados e iniciais da propriedade de altura

Este exemplo pratica os valores automáticos, herdados e iniciais da propriedade de altura em CSS. Para fazer isso, o código fornecido abaixo é praticado

Ajustando a altura

A altura é definida como valor inicial

A altura está sendo herdada

Altura no automóvel

A descrição do código está declarada abaixo:

• Um CSS para o elemento “div” é criado (como seria usado como elemento pai)
• Três classes CSS “Ini”, “INH” e “AUT” são usadas que seriam usadas para valores de altura (inicial, herdado e automático)
• Um parágrafo usa a classe "ini", enquanto o parágrafo usando a classe "INH" está contido dentro de uma div e o terceiro parágrafo faz uso da classe CSS "AUT"

A imagem do código acima é exibida abaixo

Saída:

Exemplo 3: Usando a altura com altura máxima e altura min

Vamos diferenciar o funcionamento da propriedade de altura das propriedades máximas de altura/altura da altura usando o código escrito abaixo.

Ajustando a altura

Altura com altura máxima

Altura com altura da minia

A descrição do código é

• Duas classes CSS são criadas chamadas "HX" e "HN"
• A classe "HX" contém as propriedades "Height" e "Max-Hight"
• A classe "HN" considera as propriedades de "altura da miniatura" e "altura"
• A classe "HX" está associada ao primeiro parágrafo, enquanto a classe "HN" é usada no segundo parágrafo.

A imagem do código é fornecida abaixo

Saída:

Observa-se a partir da saída que a propriedade Max-Hight dominou a propriedade de altura e a propriedade de altura da minia dominou a propriedade da altura.

Ao passar pelos exemplos, fornecemos a funcionalidade da propriedade da altura e também descrevemos seu comportamento usando-o com propriedades máximas de altura.

Conclusão

A propriedade de altura no CSS ajusta a altura (comprimento vertical) do elemento. Este artigo fornece o trabalho e o uso de propriedades da altura no CSS. A propriedade de altura não é efetuada por borda/margem/preenchimento, mas pode ser influenciada pela propriedade máxima e pela altura da minia do CSS. Fornecemos poucos exemplos que usam a altura com altura mínima/altura máxima e conclui-se que a propriedade de altura deve ser usada sozinha (não com altura máxima/altura).