Hauteur et largeur CSS
Le CSS heightet widthles propriétés sont utilisés pour définir la hauteur et la largeur d'un élément.
La propriété CSS max-widthest utilisée pour définir la largeur maximale d'un élément.
CSS Réglage de la hauteur et de la largeur
Les propriétés heightet widthpermettent de 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
Les propriétés heightet widthpeuvent 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
Exemple
Définissez la hauteur et la largeur d'un élément <div> :
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Exemple
Définissez 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 heightet widthn'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
La max-widthpropriété est utilisée pour définir la largeur maximale d'un élément.
Le max-widthpeut être spécifié en valeurs de longueur , comme 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 ce qui <div>précède 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.
L'utiliser max-widthà la place, dans cette situation, améliorera la gestion des petites fenêtres par le navigateur.
Astuce : Faites glisser la fenêtre du navigateur sur une largeur inférieure à 500 pixels pour voir la différence entre les deux divs !
Remarque : Si, pour une raison quelconque, vous utilisez à la fois la
widthpropriété et la
max-widthpropriété sur le même élément, et que la valeur de la
widthpropriété est supérieure à la
max-widthpropriété ; la
max-widthpropriété sera utilisée (et la
widthpropriété sera ignorée).
Exemple
Cet é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 - Exemples
Cet exemple montre comment définir la hauteur et la largeur de différents éléments.
Cet exemple montre comment définir la hauteur et la largeur d'une image à l'aide d'une valeur de pourcentage.
Cet exemple montre comment définir une largeur minimale et une largeur maximale d'un élément à l'aide d'une valeur de pixel.
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
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |