width
Définit la largeur d’un élément.
- Valeur initiale
auto- Héritée
- Non
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- tous les éléments sauf les éléments en ligne non remplacés (par exemple `<span>`), les lignes de tableau et les groupes de lignes
- JavaScript
element.style.width = "240px"
Exemple
#.card {
width: 100%;
max-width: 320px;
}<div class="card stage">
<strong>Cours Python</strong>
<p style="margin: 6px 0 0">La carte fait au maximum 320px de large, et elle se réduit sur les petits écrans.</p>
</div>Définition et utilisation
#La propriété width définit la largeur de la zone de contenu d’un élément. Avec la valeur par défaut box-sizing: content-box, la marge intérieure et la bordure s’ajoutent ensuite à cette valeur, c’est pourquoi de nombreux projets appliquent box-sizing: border-box à l’ensemble du site.
Les éléments de bloc avec width: auto s’étirent sur toute la largeur disponible de leur parent. Les pourcentages se calculent par rapport à la largeur du bloc englobant, et les mots-clés min-content, max-content et fit-content ajustent la largeur au contenu.
Sur les éléments en ligne, comme <span> ou <a>, width n’a aucun effet. Il faut changer leur display en inline-block ou block, ou les utiliser à l’intérieur d’un conteneur flex ou grid.
Syntaxe
#width: auto | <longueur> | <pourcentage> | min-content | max-content | fit-content;Valeurs
#- Un élément de bloc occupe toute la largeur disponible de son parent.
<longueur>
Largeur fixe en pixels ou dans une autre unité de longueur.<pourcentage>
La moitié de la largeur du bloc englobant.- La largeur de la ligne de contenu la plus longue, sans retour à la ligne.
- Juste ce dont le contenu a besoin, mais pas plus que l’espace disponible.
Valeurs en pratique
#auto
.demo { width: auto; }160px
.demo { width: 160px; }50%
.demo { width: 50%; }max-content
.demo { width: max-content; }fit-content
.demo { width: fit-content; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Plutôt qu’une largeur fixe en pixels,
max-widthest souvent préférable. L’élément se réduit alors sur les petits écrans. - Ajoutez dans votre feuille de style
*, *::before, *::after { box-sizing: border-box; }, pour quewidthinclue aussi la marge intérieure et la bordure.
Entrées associées
#- heightDéfinit la hauteur d’un élément.
- max-widthDéfinit une largeur maximale, au-delà de laquelle l’élément ne s’étire pas.
- min-widthDéfinit une largeur minimale, en dessous de laquelle l’élément ne se réduit pas.
- box-sizingDécide si width et height incluent la marge intérieure et la bordure.
- aspect-ratioDéfinit le rapport entre la largeur et la hauteur d’un élément.
- inline-sizeDéfinit la taille d’un élément le long de la ligne de texte. En écriture horizontale, c’est la largeur, et sa paire block-size définit la hauteur.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.