CSS Hauteur, largeur et largeur maximale
Le CSS height et width Les propriétés sont utilisées pour définir la hauteur et la largeur d’un élément.
Le CSS max-width La propriété est utilisée pour définir la largeur maximale d’un élément.
Cet élément a une hauteur de 50 pixels et une largeur de 100 %.
Essayez-le vous-même »
CSS Réglage de la hauteur et de la largeur
Le height et width Les propriétés sont utilisées pour définir la hauteur et la largeur d’un élément.
Les propriétés de hauteur et de largeur n’incluent pas le rembourrage, les bordures ou les marges. Il définit la hauteur/largeur de la zone à l’intérieur du rembourrage, de la bordure et de la marge de l’élément.
Hauteur et largeur CSS Valeurs
Le height et width Les propriétés peuvent avoir les valeurs suivantes :
auto– C’est par défaut. Le navigateur calcule la hauteur et la largeurlength– Définit la hauteur/largeur en px, cm, etc.%– Définit la hauteur/largeur en pourcentage du bloc contenantinitial– Définit la hauteur/largeur à sa valeur par défautinherit– La hauteur/largeur sera héritée de sa valeur parent
Hauteur et largeur CSS Exemples
Cet élément a une hauteur de 200 pixels et une largeur de 50%
Exemple
Définissez la hauteur et la largeur d’un élément
div {
hauteur : 200px ;
largeur : 50 % ;
couleur de fond : bleu poudré ;
}
Essayez-le vous-même »
Cet élément a une hauteur de 100 pixels et une largeur de 500 pixels.
Exemple
Définissez la hauteur et la largeur d’un autre élément
div {
hauteur : 100px ;
largeur : 500 pixels ;
couleur de fond : bleu poudré ;
}
Essayez-le vous-même »
Note: Rappelez-vous que le height et width les propriétés n’incluent pas le rembourrage, les bordures ou les marges ! Ils définissent la hauteur/largeur de la zone à l’intérieur du rembourrage, de la bordure et de la marge de l’élément !
Définition de la largeur maximale
Le max-width La propriété est utilisée pour définir la largeur maximale d’un élément.
Le max-width peut être spécifié dans valeurs de longueurcomme px, cm, etc., ou en pourcentage (%) du bloc contenant, ou défini sur aucun (c’est la valeur par défaut. Cela signifie qu’il n’y a pas de largeur maximale).
Le problème avec le <div> ci-dessus se produit lorsque la fenêtre du navigateur est plus petite que la largeur de l’élément (500px). Le navigateur ajoute alors une barre de défilement horizontale à la page.
En utilisant max-width au lieu de cela, dans cette situation, améliorera la gestion des petites fenêtres par le navigateur.
Conseil: Faites glisser la fenêtre du navigateur sur une largeur inférieure à 500 pixels pour voir la différence entre les deux divs !
Cet élément a une hauteur de 100 pixels et une largeur maximale de 500 pixels.
Note: Si, pour une raison quelconque, vous utilisez à la fois le
width la propriété et la
max-width propriété sur le même élément, et la valeur de la
width la propriété est plus grande que la
max-width propriété; le
max-width propriété sera utilisée (et le
width propriété sera ignorée).
Exemple
Cet élément
div {
largeur maximale : 500 px ;
hauteur : 100px ;
couleur de fond : bleu poudré ;
}
Essayez-le vous-même »
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 à l’aide de pourcentage
Cet exemple montre comment définir la hauteur et la largeur d’une image à l’aide d’une valeur en pourcentage.
Définir la largeur minimale et la largeur maximale d’un élément
Cet exemple montre comment définir une largeur minimale et une largeur maximale d’un élément à l’aide d’une valeur de pixel.
Définir la hauteur minimale et la hauteur maximale d’un élément
Cet exemple montre comment définir une hauteur minimale et une hauteur maximale d’un élément à l’aide d’une valeur de pixel.
Toutes les propriétés de dimension CSS
| Propriété | Description |
|---|---|
| hauteur | Définit la hauteur d’un élément |
| hauteur maximum | Définit la hauteur maximale d’un élément |
| largeur maximale | Définit la largeur maximale d’un élément |
| hauteur min | Définit la hauteur minimale d’un élément |
| largeur min | Définit la largeur minimale d’un élément |
| largeur | Définit la largeur d’un élément |
#CSS #Hauteur #largeur #largeur #maximale