Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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 :

box-sizing, height, width
Les propriétés height et width mesurent le contenu de l'élément.
box-sizing, height, width
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.

  • width: unset; width: inherit;

    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.

  • height: unset; height: inherit;

    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 :
Le texte de l'élément est pris en compte pour le calcul de la largeur ou de la hauteur avec certaines valeurs comme 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.