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 :

Les propriétés physiques height, width et les propriétés logiques inline-size et block-size

width
height
inline-size
block-size

Résumé des caractéristiques de la propriété width

Description rapide
Largeur de l'élément.
Statut
Standard
S'applique à
Tous les éléments du type bloc.
Type de valeur
Dimension+ | Pourcentage+ | Contenu
Valeurs prédéfinies
auto | min-content | max-content | fit-content
Pourcentages
Calculés par rapport aux dimensions de l'élément parent.
Valeur initiale
auto
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété width passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Dimensionnement des blocs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: Ancienne norme, obsolète

Statut du document:: REC (recommandation)

Description des propriétés physiques height et width.

Les propriétés height et width définissent respectivement la hauteur et la largeur de l'élément.

Ces propriétés sont dites "physiques" car elles agissent sur les dimensions de l'élément toujours de la même façon, quelque soit la direction et le sens d'écriture du texte contenu dans l'élément.

Mode de calcul des dimensions.

Attention ! La propriété box-sizing modifie la façon de calculer les dimensions d'un élément :

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.

Description des propriétés logiques inline-size et block-size.

Afin de faciliter la gestion des langues non latines, deux propriétés permettent de définir les dimensions d'un élément relativement au mode d'écriture utilisé : horizontal, vertical, etc.
Ce deux propriétés sont :

  • inline-size : dimension de l'élément dans la direction d'écriture des lignes. Pour les langues latines cette propriété est équivalente à width.
  • block-size : dimension de l'élément dans la direction des blocs. Pour les langues latines cette propriété est équivalente à height.

   

⮜───── width ─────⮞
La direction et le sens d'écriture de ce texte s'adap­tent à la langue choisie.
⮜──── height ────⮞

Si vous souhaitez plus d'explications sur la gestion des langues non latines, reportez-vous à la page de la propriété writing-mode.

Syntaxes pour width, height, inline-size et block-size.

Les exemples de syntaxe ci-dessous sont donnés avec la propriété width mais sont entièrement valables pour la propriété logique équivalente qui est inline-size pour les langues latines.

  • width: auto;

    Le navigateur détermine la largeur de l'élément. En général la largeur est égale à 100% de la largeur du parent moins 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 CSS de dimension).

    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 retours à la ligne. Reportez-vous à la valeur min-content pour ubne description plus précise.

  • 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/. Voyez la page sur max-content pour une description plus précise.

  • width: fit-content;

    La largeur de l'élément est déterminée d'après son contenu, mais sans dépasser la place disponible. Des retours à la ligne peuvent être insérés si la longueur du texte dépasse la largeur disponible.

  • height: initial; height: inherit; height: revert; height: revert-layer; height: unset;

    La valeur initiale est : auto.

Syntaxes pour height.

Les exemples de syntaxe qui suivent sont donnés pour la propriété height et sont intégralement valables pour la propriété logique correspondante (pour les langues latines c'est block-size).

  • 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 CSS de dimension).

    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 la hauteur de l'élément parent n'est pas explicitement définie (sa propriété height fixée à auto ou non précisée), le pourcentage ne sera pas calculé. Ceci afin d'éviter un calcul insoluble.

    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.

    Si le contenu est trop grand pour tenir dans la hauteur indiquée, la propriété overflow détermine comment doit être traité ce débordement.

  • height: initial; height: inherit; height: revert; height: revert-layer; height: unset;

    La valeur initiale est : auto.

Animation des propriétés width et height.

Ces deux propriétés sont parmi les plus souvent animées pour des effets visuels divers, comme par exemple faire dérouler un menu.

Édition
Annuler
Couper
Copier
Coller

Manipulation des propriétés de dimensions par programme.

Les exemples de code ci-dessous sont donnés avec la propriété width mais seront facilement transposables pour la propriété height et les propriétés logiques équivalentes inline-size et block-size.
Le paramètre el, qui figure dans tous les codes, représente l'élément de la page sur lequel on souhaite travailler.

Modifier la valeur de width en Javascript.

Deux syntaxes sont possibles en Javascript pour modifier la valeur de height pour un élément el.


function setWidth(el) {
el.style['width']='50%';
// ou
el.style.width='50%';
}

Lire en Javascript la valeur de width.

La valeur de width doit avoir été affectée à l'élément par l'attribut style dans le code HTML, ou par un code Javascript tel que celui décrit au dessus. Si la propriété a été initialisée via un sélecteur CSS, ce code ne retrouvera pas la valeur.
La largeur est renvoyée exactement dans la même unité que celle utilisée pour la définir.


function getWidth(el) {
alert(el.style['width']);
// ou
alert(el.style.width);
}

Lire la valeur calculée de width en Javascript.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives (en particulier le pourcentage) et de la prise en compte des valeurs héritées éventuelles.

La valeur est retournée en pixels, quelque soit l'unité utilisée au moment de sa définition.


function getCalcWidth(el) {
alert(window.getComputedStyle(el).getPropertyValue('width'));
}

Modifier la valeur de la propriété width avec JQuery.


function setWidth(el) {
$(el).css('width','5cm');
}

Lire la valeur calculée de la propriété width avec JQuery.

Comme pour le code Javascript, la dimension est retournée en pixels, même si elle a été définie dans une autre unité.


function getCalcWidth(el) {
return $(el).css('width');
}

Exemple interactif.

Le simulateur ci-dessous permet de faire la différence entre les propriétés physiques, comme width, et les propriétés logiques comme inline-size qui s'adaptent au mode d'écriture suivant les langues.

Il peut être utile également de se familiariser avec les unités de dimensions les moins courantes, comme vw, vh, vmin, etc. Voir les unités CSS de dimension.


Mode d'écriture :

width :

inline-size :

Pour faire tenir ce texte dans la largeur de la page, le navigateur insère des retours à la ligne entre les mots.

Prise en charge par les navigateurs.

Toutes ces propriétés sont correctement prises en charge par tous les navigateurs actuels. Cependant Internet Explorer ne traite pas les propriétés logiques (qui prennent en compte le sens d'écriture) mais IE n'est plus utilisé.

Colonnes 1 et 2
Traitement correct des propriétés physiques (qui ne prennent pas en compte le sens d'écriture suivant la langue).
Colonnes 3 et 4
Traitement des propriétés logiques, qui s'adaptent en fonction de la direction et du sens d'écriture de la langue utilisée.
1
height
2
width
3
block-size
4
inline-size
Estimation de la prise en charge en pourcentage du parc actuel.
96%
96%
93%
93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que height.

Les spécifications CSS éditées par le W3C sont organisées en modules. height fait partie du Module CSS - Dimensionnement des blocs (CSS Box Sizing Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit le ratio entre la largeur et la hauteur de l'élément.
Définit la dimension d'un l'élément suivant la direction des blocs.
Mode de calcul des dimensions de blocs.
Définit la dimension de l'élément dans la direction des lignes.
Définit la hauteur maximale de l'élément.
Définit la largeur maximale de l'élément.
Définit la hauteur minimale de l'élément.
Définit la largeur minimale de l'élément.
Largeur de l'élément.

Fonctions.

Calcule une dimension en fonction du contenu et de limites.