Qu’est-ce que la propriété CSS width ?
La propriété CSS width définit la taille horizontale préférée d’un élément, généralement celle de sa boîte de contenu. Le mode de dimensionnement des boîtes, les dimensions intrinsèques, le mode de mise en page et les contraintes min-width ou max-width peuvent modifier la taille utilisée.
Fonctionnement de la propriété CSS width
La propriété width fournit une taille préférée à l’algorithme de mise en page plutôt que de garantir la dimension finale de la boîte de bordure. Son pourcentage ou sa longueur s’applique à la boîte de contenu avec le dimensionnement content-box et à la boîte de bordure avec border-box ; les mots-clés intrinsèques et le dimensionnement automatique suivent des règles propres au mode de mise en page. Les contraintes minimales et maximales peuvent prendre le pas sur la valeur choisie, et la négociation des tailles en mode flex ou grid peut redistribuer l’espace. Cette propriété sert à dimensionner les surfaces d’affichage multimédia et les contrôles, mais les éléments remplacés apportent aussi leurs dimensions intrinsèques et leurs rapports largeur/hauteur.
Points clés
- Avec box-sizing: content-box, la largeur déclarée exclut l’espacement interne et les bordures ; avec border-box, ces composants sont inclus dans la largeur déclarée.
- Avec la valeur initiale min-width: auto, un élément flex dans un conteneur dont l’axe principal est horizontal, ainsi que certains éléments grid, par exemple un élément occupant une seule piste 1fr horizontalement, peuvent refuser de rétrécir en dessous de leur taille minimale fondée sur le contenu, sauf si leur valeur calculée pour overflow est hidden, scroll ou auto. Définir min-width: 0 supprime ce seuil minimal automatique.
- Pour une image ou une vidéo ayant des proportions intrinsèques, spécifier une dimension peut permettre à l’autre de rester automatique ; imposer les deux dimensions peut déformer le contenu affiché.
Quand la propriété CSS width est utile
Définissez width pour les images adaptatives, les lecteurs vidéo, les panneaux et les contrôles en tenant compte de la mise en page qui les contient. Une largeur exprimée en pourcentage peut provoquer un débordement lorsque l’espacement interne et les bordures s’y ajoutent avec le dimensionnement content-box.