CSS - Propriété width
Description des propriétés Object et Object.
Ces deux propriétés définissent la largeur et la hauteur de l'élément.
Attention ! La propriété box-sizing
modifie la façon de calculer cette largeur et cette hauteur :

Les propriétés
height
et width
mesurent le contenu de l'élément.

Les propriétés
height
et width
mesurent la bordure de l'élément.
Il faut également prendre en compte les propriétés min-width
,
max-width
, min-height
et max-height
qui sont prioritaires.
Syntaxes pour width
.
- width: auto;
Valeur par défaut. Le navigateur détermine la largeur de l'élément. En général la largeur est égale à 100% de la largeur du parent mais les marges intérieures de ce dernier.
- width: 200px;
La largeur de l'élément est fixée à la dimension indiquée. C'est un nombre positif ou égal à 0, suivi d'une unité de dimension (voir les unités de dimensions en CSS).
Si la valeur est exprimée en pourcentages, ceux-ci sont calculés par rapport à la largeur du parent.
- width: min-content;
La largeur de l'élément est déterminée d'après son contenu, après avoir ajouté le plus possible de sauts de ligne.
- width: max-content;
La largeur de l'élément est déterminée d'après son contenu, en le mettant sur une seule ligne, autrement dit sans insérer de sauts de ligne, sauf ceux explicitement indiqués par la balise br/.
- width:
initial
;La valeur initiale est
auto
. -
Reportez-vous à la description générale de ces valeurs.
Syntaxes pour height
.
- height: auto;
Valeur par défaut. Le navigateur détermine la largeur de l'élément en fonction de son contenu.
- height: 200px;
La hauteur de l'élément est forcée à la dimension indiquée. C'est un nombre positif ou égal à 0, suivi d'une unité de dimension (voir les unités de dimensions en CSS).
Si la valeur est exprimée en pourcentages, ceux-ci sont calculés par rapport à la hauteur du parent, à condition que cette dernière soit explicitement définie.
Si le contenu est trop grand pour devenir dans la hauteur indiquée, la propriété
overflow
détermine comment doit être traité ce débordement.
En effet, si le parent à une hauteur qui dépend du contenu (auto
par exemple), on se retrouve avec un calcul circulaire insoluble : la hauteur du parent dépend de la hauteur du contenu et cette dernière dépend de la hauteur du parent. - height: min-content; height: max-content;
Voir les explications ci-dessus.
- height:
initial
;La valeur initiale est
auto
. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
Le simulateur ci-dessous peut être utile pour se familiariser avec les unités de dimensions
les moins courantes, comme vw
, vh
, vmin
, etc.
Voir les unités de dimensions en CSS.
width
:
height
:
auto
, min-content
, min-content
.
Prise en charge par les navigateurs.
Ces deux propriétés sont correctement prises en charge par tous les navigateurs actuels.
Voir aussi...
Dimensions et marges des blocs - Propriétés.
box-sizing
: Mode de calcul des dimensions de blocs.height
: Hauteur de l'élément.margin
: Résumé des quatre marges.margin-bottom
: Marge du bas.margin-left
: Marge de gauche.margin-right
: Marge de droite.margin-top
: Marge du haut.max-height
: Hauteur maxi.max-width
: Largeur maxi.min-height
: Hauteur mini.min-width
: Largeur mini.padding
: Marges intérieures des quatre cotés.