CSS Hauteur, Largeur et Max-largeur
CSS Hauteur, Largeur et Max-largeur
Les propriétés CSS hauteur et largeur sont utilisées pour définir la hauteur et la largeur d'un élément.
La propriété CSS max-largeur sert à définir la largeur maximale d'un élément.
CSS Définir la hauteur et la largeur
Les propriétés hauteur et largeur permettent de définir la hauteur et la largeur d'un élément.
La hauteur et la largeur n'incluent pas le rembourrage, les bordures ou les marges. Elles définissent la hauteur et la largeur de la zone à l'intérieur du rembourrage, de la bordure et de la marge de l'élément.
Valeurs de hauteur et de largeur CSS
Les propriétés hauteur et largeur peuvent avoir les valeurs suivantes :
-
auto- C'est la valeur par défaut. Le navigateur calcule la hauteur et la largeur. -
longueur- Définit la hauteur ou la largeur en px, cm, em, etc. -
%- Définit la hauteur ou la largeur en pourcentage du bloc contenant. -
initial- Définit la hauteur ou la largeur à sa valeur par défaut. -
inherit- La hauteur ou la largeur sera héritée de sa valeur parente.
Exemples de hauteur et de largeur CSS
Exemple
Définir la hauteur et la largeur d'un élément <div> :
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
Exemple
Définir la hauteur et la largeur d'un autre élément <div> :
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Remarque : N'oubliez pas que les propriétés hauteur et largeur n'incluent pas le rembourrage, les bordures ou les marges ! Elles définissent la hauteur/largeur de la zone à l'intérieur du rembourrage, de la bordure et de la marge de l'élément !
CSS Utilisation de max-largeur
La propriété max-largeur définit la largeur maximale autorisée d'un élément. Cela empêche la largeur d'un élément d'être supérieure à la valeur de la propriété max-largeur .
La propriété max-largeur peut avoir les valeurs suivantes :
-
longueur- Définit la largeur maximale en px, cm, etc. -
%- Définit la largeur maximale en pourcentage du bloc contenant. -
none- C'est la valeur par défaut, ce qui signifie qu'il n'y a pas de largeur maximale.
Un problème avec la propriété largeur peut survenir lorsque la fenêtre du navigateur est plus petite que la largeur de l'élément. Le navigateur ajoute alors une barre de défilement horizontale à la page. Ainsi, l'utilisation de max-largeur améliorera la gestion par le navigateur des petites fenêtres.
Exemples de max-largeur CSS
Réduisez la fenêtre du navigateur à moins de 600px de large pour voir la différence entre les deux divs ci-dessous !
Utilisation de largeur :
Utilisation de max-largeur :
Exemple
Un élément <div> avec une max-largeur de 500 pixels, et un élément <div> avec une largeur de 500 pixels :
.div1 {
max-width: 500px;
background-color: powderblue;
}
.div2 {
width: 500px;
background-color: powderblue;
}
Remarque : Si vous utilisez à la fois la propriété largeur et la propriété max-largeur sur le même élément, et que la valeur de la propriété largeur est supérieure à celle de la propriété max-largeur , la valeur de la propriété max-largeur sera utilisée !
Exemple
Un élément <div> avec à la fois une propriété largeur et une propriété max-largeur :
.div1 {
width: 100%;
max-width: 900px;
background-color: powderblue;
}
Essayez-le vous-même - Exemples
Définir la hauteur et la largeur des éléments
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 utilisant un pourcentage
Cet exemple montre comment définir la hauteur et la largeur d'une image en utilisant une valeur en pourcentage.
Définir la min-largeur et la max-largeur d'un élément
Cet exemple montre comment définir une largeur minimale et une largeur maximale d'un élément en utilisant une valeur en pixels.
Définir la min-hauteur et la max-hauteur d'un élément
Cet exemple montre comment définir une hauteur minimale et une hauteur maximale d'un élément en utilisant une valeur en pixels.
Toutes les propriétés de dimension CSS
| Propriété | Description |
|---|---|
| hauteur | Définit la hauteur d'un élément |
| max-hauteur | Définit la hauteur maximale d'un élément |
| max-largeur | Définit la largeur maximale d'un élément |
| min-hauteur | Définit la hauteur minimale d'un élément |
| min-largeur | Définit la largeur minimale d'un élément |
| largeur | Définit la largeur d'un élément |