A propriedade largura do CSS define a largura da área de conteúdo do elemento. Essa área é o espaço entre a borda, o preenchimento e a margem de um elemento. Além disso, a propriedade CSS width com o valor “ conteúdo adequado ” ajustará a largura do elemento de acordo com o conteúdo.
Este estudo explicará a propriedade largura do CSS com o valor fit-content.
Como usar a propriedade CSS width com o valor fit-content?
Com o objetivo de usar a propriedade largura do CSS com o valor fit-content, verifique a sintaxe fornecida:
largura: ajuste-conteúdo
Exemplo
Em HTML, adicione três elementos div com o mesmo nome de classe “ caixa ” e três classes diferentes “ cor-1 ”, “ cor-2 ', e ' cor-3 ”, respectivamente. Adicione o elemento
dentro de cada div para adicionar conteúdo à página da web:
< div aula = 'caixa cor-1' >
< p > conteúdo de ajuste de largura CSS p >
div >
< div aula = 'caixa cor-2' >
< p > Olá Mundo ! p >
div >
< div aula = 'caixa cor-3' >
< p > O trabalho em equipe começa com a construção da confiança. Somos uma equipe trabalhando para uma missão comum. p >
div >
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 torná-los mais bonitos. No exemplo em andamento, vamos verificar o comportamento do “ largura ” propriedade com o valor “ conteúdo adequado ” no CSS.
Estilo 'caixa' div
.caixa {largura: ajuste-conteúdo;
altura: 50px;
cor: fantasma branco;
preenchimento: 6px;
margem: 2px;
tamanho 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 adequado ” 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 ” 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 ” determina o tamanho da fonte.
Estilo 'cor-1' div
.cor- 1 {cor de fundo: #00ABB3;
}
O ' cor de fundo ” propriedade é definida como “ .cor-1 ” div.
Estilo “color-2” div
.cor- 2 {cor de fundo: #083AA9;
}
Estilo “cor-3” div
cor de fundo: #4C6793;
}
Pode-se observar que a largura do elemento é igual ao conteúdo:
Isso é ótimo! Aprendemos com sucesso o uso do CSS “ largura ” propriedade com o valor “ conteúdo adequado ”.
Conclusão
A propriedade largura do CSS nos permite utilizar vários valores. Esses valores estão em porcentagem, pixels ou mais. Para configurá-lo de acordo com o conteúdo, o “ conteúdo adequado ” valor pode ser definido. Este post descreveu a propriedade largura do CSS com o valor fit-content com uma demonstração prática.