Propriété CSS width
La propriété CSS width définit la largeur d'un élément. Découvrez des exemples pour chacune des valeurs de cette propriété.
La propriété CSS width définit la largeur de la zone de contenu d'un élément — la boîte intérieure qui contient le texte et les éléments enfants. Par défaut, cette largeur n'inclut pas la bordure, le rembourrage ni la marge : ceux-ci s'ajoutent en dehors, de sorte que la largeur totale rendue de l'élément est width + padding + border.
Cette page explique ce que mesure width, toutes les valeurs qu'elle accepte (y compris les mots-clés intrinsèques modernes min-content, max-content et fit-content), la résolution des pourcentages, et le piège du modèle de boîte qui trébuche la plupart des débutants.
Interaction de width avec le modèle de boîte
La façon dont width est mesurée dépend de la propriété box-sizing :
content-box(valeur par défaut) —widthdimensionne uniquement le contenu. Le rembourrage et la bordure sont ajoutés à l'extérieur. Une boîte avecwidth: 200px; padding: 20px; border: 5px solidest rendue avec une largeur de 250px.border-box—widthdimensionne le contenu, le rembourrage et la bordure ensemble. Les mêmes déclarations produisent exactement 200px de largeur, et la zone de contenu rétrécit pour faire de la place.
Parce que border-box rend les tailles des éléments prévisibles, de nombreuses feuilles de style le définissent globalement :
*,
*::before,
*::after {
box-sizing: border-box;
}Éléments auxquels width s'applique
La propriété width s'applique à tous les éléments sauf les éléments en ligne non remplacés (comme un simple <span>), les lignes de tableau et les groupes de lignes (c'est-à-dire <thead>, <tfoot> et <tbody>). Pour donner une largeur à un élément en ligne, définissez d'abord display: inline-block ou display: block.
La propriété accepte une longueur CSS (px, pt, em, etc.), un pourcentage ou un mot-clé tel que auto ou max-content.
Un pourcentage est résolu par rapport à la largeur de l'élément parent (le bloc conteneur). Pour les éléments positionnés de façon absolue, le pourcentage est calculé par rapport à la largeur de la boîte de rembourrage du bloc conteneur.
La propriété width peut être remplacée par min-width et max-width : une valeur max-width inférieure à width l'emporte, et une valeur min-width supérieure à width l'emporte également. La propriété complémentaire est height.
Les valeurs de longueur négatives sont interdites.
| Valeur initiale | auto |
|---|---|
| S'applique à | Tous les éléments sauf les éléments en ligne non remplacés, les lignes de tableau et les groupes de lignes. |
| Héritage | Non. |
| Animable | Oui. La largeur d'un élément est animable. |
| Version | CSS1 |
| Syntaxe DOM | Object.style.width = "300px"; |
Syntaxe
Syntaxe de la propriété CSS width
width: auto | length | percentage | initial | inherit | fit-content | min-content | max-content | stretch;Exemple de la propriété width spécifiée en "%" :
Exemple de la propriété CSS width avec une valeur en %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Résultat
Dans l'exemple donné, la largeur du conteneur div est de 50% — la moitié de la largeur de son parent (ici, le <body>).
Dans l'exemple suivant, la largeur du premier élément est de 250px et celle du second élément est de 25em :
Exemple de la propriété width spécifiée en "px" et "em" :
Exemple de la propriété CSS width avec les valeurs px et em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.t1 {
width: 250px;
border: 1px solid black;
background-color: #1c87c9;
}
div.t2 {
width: 25em;
border: 1px solid black;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<h3>width: 250px</h3>
<div class="t1">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>width: 25em</h3>
<div class="t2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Mots-clés de dimensionnement intrinsèque
En plus des longueurs fixes et des pourcentages, width accepte des mots-clés qui dimensionnent un élément en fonction de son contenu plutôt que de son conteneur :
max-content— la largeur que le contenu souhaite s'il n'était jamais retourné à la ligne. Pour un paragraphe, il s'agit du texte complet sur une seule ligne.min-content— la plus petite largeur sans débordement, c'est-à-dire la largeur du mot le plus long qui ne peut pas être coupé.fit-content— grandit avec le contenu commemax-contentmais ne dépasse jamais l'espace disponible, ce qui fait qu'il passe à la ligne en atteignant le bord du conteneur. Idéal pour les boîtes en « rétrécissement au contenu » comme les boutons ou les badges.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
margin-bottom: 10px;
padding: 5px;
}
.min { width: min-content; }
.max { width: max-content; }
.fit { width: fit-content; }
</style>
</head>
<body>
<div class="min">width: min-content</div>
<div class="max">width: max-content</div>
<div class="fit">width: fit-content</div>
</body>
</html>La boîte min-content est aussi étroite que le mot le plus long, la boîte max-content s'étend pour contenir toute la ligne, et la boîte fit-content se situe entre les deux en fonction de l'espace disponible.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| auto | Le navigateur calculera une largeur pour l'élément spécifié. Il s'agit de la valeur par défaut. | Essayer » |
| length | Définit la largeur en px, pt, cm, etc. | Essayer » |
| percentage | Définit la largeur en pourcentage de l'élément conteneur. | Essayer » |
| initial | Applique la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite de la propriété depuis son élément parent. | |
| fit-content | Calcule la largeur en fonction de la taille intrinsèque du contenu. | Essayer » |
| min-content | Calcule la largeur en fonction de la taille minimale du contenu. | Essayer » |
| max-content | Calcule la largeur en fonction de la taille maximale du contenu. | Essayer » |
| stretch | Étire l'élément pour remplir le conteneur. | Essayer » |
Pièges courants
- Une largeur en pourcentage sans largeur parent définie. Si la largeur du parent est
auto, un pourcentage peut ne pas se résoudre comme prévu. Donnez au bloc conteneur une largeur explicite (ou reposez-vous sur la largeur naturelle à pleine largeur d'un élément de type bloc). - Le rembourrage et la bordure font déborder la mise en page. Avec le
content-boxpar défaut, ajouter un rembourrage à un élément de largeur 100% le fait déborder de son parent. Passez àbox-sizing: border-boxpour maintenir le total à 100%. widthsur les éléments en ligne est ignoré. Définissez d'aborddisplay: inline-blockoublock.- Réactivité. Préférez
max-widthà unewidthfixe pour les mises en page fluides :max-width: 600pxpermet à une boîte de rétrécir sur les petits écrans tout en la limitant sur les grands.