1 - Propriétés height & width (hauteur et largeur)

Les propriétés height et width permettent de définir la hauteur et la largeur d'un élément en CSS.

La hauteur et la largeur peuvent être définies sur auto (valeur par défaut. Indique que le navigateur calcule la hauteur et la largeur) spécifiées en valeurs de longueur, telles que px, cm, etc. ou en pourcentage (%) du bloc qui le contient.

Exemple

div {
//élément div css de hauteur 150 pixels et une largeur 450px;
    height: 150px;
    width: 450px;
    background-color: blue;
}

2- Propriété max-width

La propriété max-width est utilisée pour définir la largeur maximale d'un élément.

La largeur maximale peut être spécifiée en valeurs de longueur, telles que px, cm, etc., ou en pourcentage (%) du bloc conteneur, ou définie sur aucune (valeur par défaut. Indique qu'il n'y a pas de largeur maximale).

Le problème avec la balise div ci-dessus se produit lorsque la fenêtre du navigateur est inférieure à la largeur de l'élément (450px). Le navigateur ajoute ensuite une barre de défilement horizontale à la page.

Dans ce cas, l'utilisation de max-width améliorera la gestion des petites fenêtres par le navigateur.

Remarque : faites glisser la fenêtre du navigateur sur une largeur inférieure à 450 pixels pour voir la différence entre les deux div!

L'exemple suivant introduit un élément <div> avec une hauteur de 120 pixels et une largeur maximale de 450 pixels:

Exemple

div {
    max-width: 450px;
    height: 120px;
    background-color: blue;
}

3 - Récapitulation des propriétés des dimensions CSS

1. height             : Définit la hauteur d'un élément
2. max-height  : Définit la hauteur maximale d'un élément
3. max-width   : Définit la largeur maximale d'un élément
4. min-height  : Définit la hauteur minimale d'un élément
5. min-width   : Définit la largeur minimale d'un élément
6. width            : Définit la largeur d'un élément

Younes Derfoufi
CRMEF OUJDA