Conteúdo de ajuste da largura do CSS

A propriedade de largura do CSS define a largura da área de conteúdo do elemento. Esta área é o espaço entre a fronteira, o preenchimento e a margem de um elemento. Além disso, a propriedade de largura do CSS com o valor “conteúdo de ajuste”Ajustará a largura do elemento de acordo com o conteúdo.

Este estudo explicará a propriedade de largura do CSS com o conteúdo de ajuste do valor.

Como usar a propriedade de largura do CSS com valor de conteúdo de ajuste?

Com o objetivo de usar a propriedade de largura do CSS com valor de conteúdo de ajuste, confira a sintaxe fornecida:

Largura: Conteúdo do ajuste

Exemplo

No HTML, adicione três elementos div com o mesmo nome de classe “caixa”E três classes diferentes“Color-1","Color-2", e "Color-3”, Respectivamente. Adicionar

Elemento dentro de cada div para adicionar conteúdo à página da web:

Conteúdo de ajuste da largura do CSS

Olá Mundo!

O trabalho em equipe começa construindo confiança. Somos uma equipe trabalhando para uma missão comum.

Aqui está a saída do código HTML:

Até agora, discutimos a página HTML. Agora, na próxima seção, aplicaremos diferentes estilos CSS aos elementos HTML para fazê -los parecer melhores. No exemplo em andamento, verificaremos o comportamento do “largura”Propriedade com o valor“conteúdo de ajuste”No CSS.

Estilo “caixa” div

.caixa
Largura: conteúdo de ajuste;
Altura: 50px;
Cor: Ghostwhite;
preenchimento: 6px;
margem: 2px;
Size da fonte: 18px;

O ".caixa”Refere -se à caixa de classe div. Abaixo estão as propriedades que são aplicadas a ele:

• • ““largura”Propriedade com o valor“conteúdo de ajuste”Usa o espaço disponível, mas não excederá o conteúdo.
  • ““altura”É a propriedade que determina a altura do elemento.
  • ““cor”Define a cor da fonte do elemento.
  • ““preenchimento”A propriedade produz espaço dentro da borda do elemento ou ao redor do conteúdo.
  • ““margem”Determina o espaço ao redor do elemento.
  • ““tamanho da fonte”Propriedade determina o tamanho da fonte.

Estilo “cor-1” div

.Color-1
Background-Color: #00ABB3;

O "cor de fundo”A propriedade está definida como“.Color-1”Div.

Estilo “cor-2” div

.Color-2
Background-Color: #083AA9;

Estilo “color-3” div

.Color-3
Background-Color: #4C6793;

Pode -se observar que a largura do elemento é definida igual ao conteúdo:

Isso é ótimo! Aprendemos com sucesso o uso do CSS “largura”Propriedade com o valor“conteúdo de ajuste”.

Conclusão

A propriedade de largura do CSS nos permite utilizar vários valores. Esses valores estão em porcentagem, pixels ou mais. Para defini -lo de acordo com o conteúdo, o “conteúdo de ajuste”O valor pode ser definido. Este post descreveu a propriedade de largura do CSS com o conteúdo de ajuste do valor com uma demonstração prática.