Les propriétés width et height en CSS sont utilisées pour définir les dimensions des éléments HTML. Elles permettent de contrôler la largeur et la hauteur d’un élément, influençant ainsi sa taille et son apparence sur la page web.

La propriété Width

Propriété : Cette propriété spécifie la largeur d’un élément. Elle peut accepter diverses unités pour définir cette largeur :

Pixels (px) : Une unité absolue représentant des points à l’écran.

Pourcentage (%) : La largeur est calculée en pourcentage de la largeur du conteneur parent.

Em (em) : Une unité relative basée sur la taille de la police de l’élément ou de son ancêtre.

Viewport Width (vw) : Une unité relative à la largeur de la fenêtre du navigateur, où 1vw est égal à 1% de la largeur de la fenêtre.

La propriété Height

Propriété : Cette propriété spécifie la hauteur d’un élément. Elle accepte des unités similaires à celles de width :

Pixels (px) : Une unité absolue pour définir une hauteur fixe.

Pourcentage (%) : La hauteur est calculée en pourcentage de la hauteur du conteneur parent.

Em (em) : Une unité relative, souvent utilisée pour définir la hauteur en fonction de la taille de la police.

Viewport Height (vh) : Une unité relative à la hauteur de la fenêtre du navigateur, où 1vh est égal à 1% de la hauteur de la fenêtre.

Exemple

/* Définit la largeur de l'élément en pixels */
.box {
    width: 200px;
}

/* Définit la hauteur de l'élément en pixels */
.box {
    height: 150px;
}

/* Définit la largeur de l'élément en pourcentage de la largeur du conteneur parent */
.box {
    width: 50%;
}

/* Définit la hauteur de l'élément en pourcentage de la hauteur du conteneur parent */
.box {
    height: 30%;
}

/* Définit la largeur de l'élément en unités em basées sur la taille de la police */
.box {
    width: 10em;
}

/* Définit la hauteur de l'élément en unités em basées sur la taille de la police */
.box {
    height: 5em;
}

/* Définit la largeur de l'élément en pourcentage de la largeur de la fenêtre du navigateur */
.box {
    width: 50vw;
}

/* Définit la hauteur de l'élément en pourcentage de la hauteur de la fenêtre du navigateur */
.box {
    height: 50vh;
}