CSS : width - Web Formation

Description

La propriété width permet de définir la largeur d’un élément HTML.

Elle contrôle uniquement la largeur du contenu, c’est-à-dire l’espace intérieur avant le padding, les border et la margin. La largeur totale affichée peut donc être plus grande selon ces autres propriétés.

La largeur peut être exprimée en unités fixes (px), relatives (%), ou calculées dynamiquement.

La propriété width n’a aucun effet sur les éléments inline (ex. : <a> ou <strong>).

Pour dimensionner un élément inline, il faut modifier leur comportement d’affichage avec la propriété display.

Propriétés détaillées

width : définit la largeur du contenu de l’élément.
min-width : largeur minimale à ne jamais dépasser (empêche un élément de devenir trop étroit).
max-width : largeur maximale que l’élément ne doit pas dépasser.

Valeurs possible

Voici quelques exemples de valeurs utilisables pour width :

Type	Exemple	Description
Longueur fixe	`200px`, `30em`	Largeur précise, non responsive.
Pourcentage	`50%`	Largeur calculée par rapport à la largeur du parent.
Auto	`width: auto;`	Valeur par défaut : la largeur s’ajuste au contenu ou selon le contexte.
Viewport	`50vw`	Largeur relative à la largeur de la fenêtre (1vw = 1%).
Fonction calc()	`calc(100% - 40px)`	Combinaison de différentes unités.

Exemple

<div class="wid-x">Boite dimensionnée en largeur</div>

<div class="wid-x">Boite dimensionnée en largeur</div>

.wid-x {
    width: 300px;
    background-color: lightcoral;
}

.wid-x {    width: 300px;    background-color: lightcoral;}

Aperçu du résultat

Boite dimensionnée en largeur

Remarques

Si la largeur dépasse l’espace disponible, l’élément peut déborder (overflow), ce qui peut nécessiter overflow: hidden, scroll ou auto.
Lorsque box-sizing: border-box est appliqué, la largeur inclut aussi padding et border (pratique pour les mises en page modernes).