Às vezes, pode ser um desafio projetar sites que parecem bem em uma variedade de dispositivos. O HTML fornece várias propriedades para definir o tamanho e a posição do elemento para resolver alguns problemas responsivos. As propriedades mais comuns são os “largura" e "altura”. Essas propriedades são usadas para especificar o tamanho do elemento. Além disso, podemos utilizar as propriedades Max-Hight, Max-Width, Min-Hight e Min-Width para resolver problemas relacionados à capacidade de resposta.

Este post cobrirá:

• Como ajustar a altura máxima do elemento com CSS?
• Como ajustar a altura mínima do elemento com CSS?
• Como ajustar a largura mínima do elemento com CSS?
• Como ajustar a largura máxima do elemento com CSS?

Pré -requisito: Criar arquivo HTML

Primeiro, crie um arquivo HTML seguindo as etapas mencionadas abaixo:

• Adicione um “”Elemento com o nome da classe“principal”.
• Dentro disso, adicione dois “”Elementos com o nome da classe“layout-img" e "Conteúdo do layout”, Respectivamente.
• O elemento "" com classe "Layout-IMG" contém o "”Elemento que está associado ao“src”Atributo, que especifica o URL da imagem e o“largura”Atributo para definir a largura do elemento.
• O elemento “” com “Conteúdo do layout"Segura um"

  " e "

  ”Elementos para o cabeçalho e parágrafo.

Aqui está o código HTML:

Aprenda conosco

A propriedade "largura" é utilizada para definir a largura do elemento.
A propriedade "altura" é utilizada para definir a altura do elemento.

Na próxima seção, aprenderemos a determinar a altura e a largura dos elementos HTML usando CSS.

Classe de estilo “Principal”

Primeiro, acesse o principal “”Contêiner com a ajuda do atributo de classe“.principal”. Em seguida, aplique as seguintes propriedades CSS:

.principal
Largura: 300px;
Altura: 360px;
margem: automático;
Size da fonte: 20px;
borda: 1px RGB sólido (237, 234, 234);
Radio de fronteira: 20px;
Background-Color: RGB (235, 235, 235);

Aqui estão as propriedades de estilo CSS que são aplicadas na div:

• ““largura”Determina a largura do elemento.
• ““altura”Define a altura do elemento.
• ““margem”Adiciona espaços em todos os lados do elemento.
• ““tamanho da fonte”Ajusta o tamanho da fonte.
• ““fronteira”A propriedade é aplicada para definir uma borda ao redor do elemento. Ele mantém os valores para a largura, estilo e cor da borda.
• ““Radio de fronteira”Propriedade faz as bordas do elemento redondo.
• ““cor de fundo”Aplica a cor de fundo do elemento.

Saída

Classe de “Conteúdo do Layout” de estilo

.Content de layout
preenchimento: 0 10px;
Background-Color: RGB (233, 179, 112);

O “” tendo aula “Conteúdo do layout"É estilizado com o"preenchimento”Propriedade que adiciona espaço ao redor do conteúdo do elemento.

Saída

Como ajustar a altura máxima do elemento no CSS?

O "altura máximaA propriedade determina a altura máxima do elemento. O conteúdo transbordará se exceder a altura máxima.

No CSS, especifique a altura máxima do elemento "" com um "Conteúdo do layout”Classe especificando a“altura máxima" propriedade:

Max-Hight: 100px;

Saída

Como ajustar a altura mínima do elemento no CSS?

O "altura da minia”A propriedade ajusta a altura mínima do elemento. Será aplicado se o conteúdo do elemento for menor que a altura mínima. Não tem efeito se o conteúdo exceder a altura da minia.

Adicione o "altura da minia”Propriedade da classe“Conteúdo do layout”Para especificar a altura mínima do elemento:

Min-altura: 100px;

Saída

Como ajustar a largura mínima do elemento no CSS?

O CSS “largura min”Propriedade determina a largura mínima do elemento. O "largura min”É aplicado ao elemento se o conteúdo for menor que a largura mínima do elemento. Não mostrará nenhum efeito se o conteúdo exceder a largura mínima.

Adicione o "largura min”Propriedade da classe“ Conteúdo do layout ”para ver como isso afeta:

largura min: 310px;

Saída

Como ajustar a largura máxima do elemento no CSS?

CSS “largura máxima”A propriedade é utilizada para determinar a largura máxima do elemento. Podemos dizer que tem uma largura de elemento fixo. Se o conteúdo exceder a largura do elemento, seu conteúdo transbordará. Como resultado, a altura mudará automaticamente.

Adicione o "largura máxima”Propriedade com o valor“230px”Para ver seu efeito:

MAX-LUDA: 230PX;

Saída

Aprendemos como especificar as propriedades de largura e altura dos elementos usando CSS.

Conclusão

Para definir a altura e a largura do elemento HTML, o CSS “altura" e "larguraAs propriedades são utilizadas. Esses CSs “largura min","largura máxima","altura da minia", e "altura máximaAs propriedades são utilizadas para limitar a largura e a altura do elemento em relação ao elemento pai. Este artigo demonstrou os métodos de limitação do tamanho do elemento usando as propriedades CSS.