La propriété CSS width définit la largeur de la zone de contenu de l'élément. Cette zone est l'espace entre la bordure, le remplissage et la marge d'un élément. De plus, la propriété CSS width avec la valeur ' fit-contenu ” ajustera la largeur de l'élément en fonction du contenu.
Cette étude expliquera la propriété CSS width avec la valeur fit-content.
Comment utiliser la propriété CSS width avec la valeur fit-content ?
Dans le but d'utiliser la propriété CSS width avec la valeur fit-content, consultez la syntaxe donnée :
largeur : fit-contenu
Exemple
En HTML, ajoutez trois éléments div avec le même nom de classe ' boîte ' et trois classes différentes ' couleur-1 ”, “ couleur-2 ', et ' couleur-3 ', respectivement. Ajoutez un élément
à l'intérieur de chaque div pour ajouter du contenu à la page Web :
< div classe = 'case couleur-1' >
< p > Contenu d'ajustement de la largeur CSS p >
div >
< div classe = 'boîte couleur-2' >
< p > Bonjour le monde ! p >
div >
< div classe = 'boîte couleur-3' >
< p > Le travail d'équipe commence par établir la confiance. Nous sommes une équipe qui travaille pour une mission commune. p >
div >
Voici la sortie du code HTML :
Jusqu'à présent, nous avons discuté de la page HTML. Maintenant, dans la section suivante, nous appliquerons différents styles CSS aux éléments HTML pour les rendre plus beaux. Dans l'exemple en cours, nous allons vérifier le comportement du ' largeur « propriété ayant la valeur » fit-contenu ” dans le CSS.
Style 'boîte' div
.boîte {width : fit-contenu ;
hauteur : 50px ;
couleur : blanc fantôme ;
rembourrage : 6px ;
marge : 2px ;
taille de police : 18 px ;
}
Le ' .boîte ” fait référence à la boîte de classe div. Voici les propriétés qui lui sont appliquées :
-
- ' largeur « propriété avec la valeur » fit-contenu ” utilise l'espace disponible, mais il ne dépassera pas le contenu.
- ' la taille ” est la propriété qui détermine la hauteur de l'élément.
- ' Couleur ” définit la couleur de police de l'élément.
- ' rembourrage ” La propriété produit un espace à l'intérieur de la bordure de l'élément ou autour du contenu.
- ' marge ” détermine l'espace autour de l'élément.
- ' taille de police ” propriété détermine la taille de la police.
Style 'couleur-1' div
.Couleur- 1 {Couleur de l'arrière plan: #00ABB3 ;
}
Le ' Couleur de l'arrière plan ' la propriété est définie sur ' .color-1 ” div.
Style 'couleur-2' div
.Couleur- 2 {Couleur de l'arrière plan: #083AA9 ;
}
Style 'couleur-3' div
Couleur de l'arrière plan: #4C6793 ;
}
On peut observer que la largeur de l'élément est égale au contenu :
C'est génial! Nous avons appris avec succès l'utilisation du CSS ' largeur « propriété avec la valeur » fit-contenu ”.
Conclusion
La propriété CSS width nous permet d'utiliser plusieurs valeurs. Ces valeurs sont en pourcentage, en pixels ou plus. Pour le régler en fonction du contenu, le « fit-contenu ” la valeur peut être définie. Cet article a décrit la propriété CSS width avec la valeur fit-content avec une démonstration pratique.