Dimensions CSS

Définition des dimensions des éléments

CSS a plusieurs propriétés de dimension, telles que width, height, max-width, min-width, max-height, et min-height qui vous permettent de contrôler la largeur et la hauteur d'un élément. Les sections suivantes décrivent comment utiliser ces propriétés pour créer une meilleure mise en page de page Web.

Réglage de la largeur et de la hauteur

La propriété width et height définit la largeur et la hauteur de la zone de contenu d'un élément.

Cette largeur et cette hauteur n'incluent pas les rembourrages (padding), les bordures (border) ou les marges (margin). Voir le modèle de boîte CSS pour savoir comment la largeur et la hauteur effectives de la boîte d'un élément sont calculées.

Essayons l'exemple suivant et voyons comment cela fonctionne réellement :

div {
    width: 300px;
    height: 200px;
}

Les règles de style ci-dessus attribuent une largeur fixe de 300 pixels et une hauteur de 200 pixels à l'élément <div>.

Les propriétés width et height peuvent prendre les valeurs suivantes :

• lenght - spécifie une largeur en px, em, rem, pt, cm, etc.
• % - spécifie une largeur en pourcentage (%) de la largeur de l'élément conteneur.
• auto - le navigateur calcule une largeur appropriée pour l'élément.
• initial - Définit la largeur et la hauteur à sa valeur par défaut, qui est auto.
• inherit - spécifie que la largeur doit être héritée de l'élément parent.

Vous ne pouvez pas spécifier de valeurs négatives pour les propriétés width et height.

Conseil : Généralement, lorsque vous créez un élément de bloc, tel que <div>, <p>, etc., le navigateur définit automatiquement sa largeur à 100 % de la largeur disponible et sa hauteur à ce qui est nécessaire pour afficher tout le contenu. Vous devez éviter de définir une largeur et une hauteur fixes, sauf si cela est nécessaire.

Définir la largeur et la hauteur maximale

Vous pouvez utiliser la propriété max-width et max-height pour spécifier la largeur et la hauteur maximale de la zone de contenu. Cette largeur et cette hauteur maximales n'incluent pas les rembourrages, les bordures ou les marges.

Un élément ne peut pas être plus large que la valeur max-width, même si la valeur width de la propriété est définie sur quelque chose de plus grand. Par exemple, si le width est défini sur 300px et le max-width est défini sur 200px, la largeur réelle de l'élément sera de 200px. Voyons un exemple :

div {
    width: 300px;
    max-width: 200px;
}

Remarque : Si la propriété min-width est spécifiée avec une valeur supérieure à celle de max-width propriété, dans ce cas la valeur min-width sera en fait celle qui est appliquée.

De même, un élément qui s'est appliqué max-height ne sera jamais plus grand que la valeur spécifiée, même si la propriété height est définie sur quelque chose de plus grand. Par exemple, si le height est défini sur 200px et le max-height défini sur 100px, la hauteur réelle de l'élément sera de 100px.

div {
    height: 200px;
    max-height: 100px;
}

Remarque : Si la propriété min-height est spécifiée avec une valeur supérieure à celle de la propriété max-height, dans ce cas la valeur min-height sera en fait celle qui est appliquée.

Définir la largeur et la hauteur minimale

Vous pouvez utiliser la propriété min-width et min-height pour spécifier la largeur et la hauteur minimale de la zone de contenu. Cette largeur et cette hauteur minimale n'incluent pas les rembourrages, les bordures ou les marges.

Un élément ne peut pas être plus étroit que la min-width valeur, même si la valeur de la propriété width est définie sur une valeur inférieure. Par exemple, si width est défini sur 300px et min-width est défini sur 400px, la largeur réelle de l'élément sera de 400px. Voyons comment cela fonctionne réellement :

div {
    width: 200px;
    min-width: 300px;
}

Remarque : La propriété min-width est généralement utilisée pour s'assurer qu'un élément a au moins une largeur minimale même si aucun contenu n'est présent. Cependant, l'élément sera autorisé à se développer normalement si son contenu dépasse la largeur minimale définie.

De même, un élément auquel min-height est appliqué ne sera jamais inférieur à la valeur spécifiée, même si la propriété height est définie sur une valeur inférieure. Par exemple, si la propriété height est définie sur 200px et la propriété min-height est définie sur 300px, la hauteur réelle de l'élément sera de 300px.

div {
    height: 100px;
    min-height: 200px;
}

Remarque : La propriété min-height est généralement utilisée pour s'assurer qu'un élément a au moins une hauteur minimale même si aucun contenu n'est présent. Cependant, l'élément sera autorisé à se développer normalement si le contenu dépasse la hauteur minimale définie.

Définition d'une plage de largeur et de hauteur

Les propriétés min-width et min-height sont souvent utilisées en combinaison avec les propriétés max-width et max-height pour produire une plage de largeur et de hauteur pour un élément.

Cela peut être très utile pour créer un design flexible. Dans l'exemple suivant, la largeur minimale de l'élément <div> serait de 300px et il peut s'étirer horizontalement jusqu'à un maximum de 500px.

div {
    min-width: 300px;
    max-width: 500px;
}

De même, vous pouvez définir une plage de hauteur pour un élément. Dans l'exemple ci-dessous, la hauteur minimale de l'élément <div> serait de 300px et il peut s'étirer verticalement jusqu'à un maximum de 500px.

div {
    min-height: 300px;
    max-height: 500px;
}