Hauteur et largeur CSS

La largeur de cet élément est de 100 %.

CSS Définir la hauteur et la largeur

height et width Cette propriété est utilisée pour définir la hauteur et la largeur d'un élément.

Les propriétés height et width ne comprennent pas la marge interne, la bordure ou l'espace extérieur. Elle définit la hauteur ou la largeur de la zone à l'intérieur de la marge interne, de la bordure et de l'espace extérieur de l'élément.

Valeurs de hauteur et de largeur en CSS

height et width Cette propriété peut être définie comme suit :

  • auto - Par défaut. Le navigateur calcule la hauteur et la largeur.
  • length - Définit la hauteur et la largeur en px, cm, etc.
  • % - Définit la hauteur et la largeur en pourcentage de la boîte englobante.
  • initial - Réinitialise la hauteur et la largeur aux valeurs par défaut.
  • inherit - Inhérite la hauteur et la largeur de la valeur parente.

Exemples de hauteur et de largeur en CSS

L'élément a une hauteur de 200 pixels et une largeur de 50 %

exemple

Définir la hauteur et la largeur d'un élément <div> :

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

essayez-le vous-même

L'élément a une hauteur de 100 pixels et une largeur de 500 pixels.

exemple

Définir la hauteur et la largeur d'un autre élément <div> :

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

essayez-le vous-même

Remarque :N'oubliez pas queheight et width Cette propriété ne comprend pas la marge interne, la bordure ou l'espace extérieur ! Elle définit la hauteur ou la largeur de la zone à l'intérieur de la marge interne, de la bordure et de l'espace extérieur de l'élément !

Définir max-width

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

on peut spécifier max-width (largeur maximale) en utilisant des valeurs en longueur (par exemple px, cm, etc.) ou en pourcentage de la boîte englobante (%) et on peut également le définir sur none (valeur par défaut. Cela signifie qu'il n'y a pas de largeur maximale).

Lorsque la fenêtre du navigateur est plus petite que la largeur de l'élément (500px), il se produit <div> problèmes. Ensuite, le navigateur ajoutera une barre de défilement horizontale à la page.

Dans ce cas, utilisez max-width peut améliorer la gestion des petites fenêtres par le navigateur.

Astuce :Déplacez la fenêtre du navigateur à une largeur inférieure à 500px pour voir la différence entre les deux div !

l'élément a une hauteur de 100 pixels et une largeur maximale de 500 pixels.

l'élément a une hauteur de 100 pixels et une largeur maximale de 500 pixels.

Remarque :max-width Les valeurs des attributs width(largeur).

exemple

l'élément <div> a une hauteur de 100 pixels et une largeur maximale de 500 pixels :

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

essayez-le vous-même

plus d'exemples

Définir la hauteur et la largeur d'un élément
cet exemple montre comment définir la hauteur et la largeur de différents éléments.
Définir la hauteur et la largeur d'une image en pourcentage
cet exemple montre comment utiliser les pourcentages pour définir la hauteur et la largeur d'une image.
Définir la largeur minimale et maximale d'un élément
cet exemple montre comment utiliser les valeurs en pixels pour définir la largeur minimale et maximale d'un élément.
Définir la hauteur minimale et maximale d'un élément
Cet exemple montre comment définir la hauteur minimale et maximale d'un élément en utilisant des valeurs en pixels.

Définir les propriétés de dimension CSS

Propriété Description
height Définir la hauteur d'un élément.
max-height Définir la hauteur maximale d'un élément.
max-width Définir la largeur maximale d'un élément.
min-height Définir la hauteur minimale d'un élément.
min-width Définir la largeur minimale d'un élément.
width Définir la largeur d'un élément.