Les propriétés physiques height
, width
et les propriétés logiques inline-size
et block-size
Résumé des caractéristiques de la propriété width
auto
| min-content
| max-content
| fit-content
auto
width
passe progressivement d'une valeur à une autre.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 :
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.
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 ─────⮞
⮜──── 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.
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.
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.
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.
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é.
height
width
block-size
inline-size
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.