Largeur et hauteur

En CSS, la hauteur (height, en anglais) et la largeur (width en anglais) d’un élément HTML sont définis en utilisant les propriétés height et width.

Ces propriétés ne sont pas utilisées pour définir les marges intérieures et/ou extérieures, ni les bordures d’un élément HTML, mais bien pour définir la hauteur et la largeur d’un élément.

Pour définir la largeur maximale d’un élément, la propriété max-width est utilisée.

Ce cours détail toutes les propriétés CSS utilisable pour régler la hauteur et la largeur d’un élément.

Les valeurs utilisables avec height et width

Comme beaucoup d’autres propriétés CSS, height et width peuvent recevoir plusieurs types de valeurs :

• auto : valeur utilisée par défaut. Le navigateur calcule lui-même la hauteur et la largeur de l’élément
• taille : définit la hauteur/largeur d’un élément en px, pt, em, cm
• % : définit la hauteur et la largeur en pourcentage du bloc contenant.
• initial : règle la hauteur et la largeur sur leur valeur par défaut
• inherit : la hauteur et la largeur sera héritée de l’élément parent

Exemple :

p {
    background-color: red;
    width: 70%;
    height: 400px; /* Ici, le paragraphe aura une largeur de 70% et une hauteur de 400 pixels */
}

Définir une largeur maximum