Propriétés CSS Dimension
Les propriétés de dimension CSS vous permettent de contrôler la hauteur et la largeur d'un élément.
Cet élément a une largeur de 100%.
Réglage de la hauteur et la largeur
Les height et width propriétés sont utilisées pour définir la hauteur et la largeur d'un élément.
La height et la width peuvent être réglées à l' auto (ce qui est par défaut. Signifie que le navigateur calcule la hauteur et la largeur), ou être spécifié dans les valeurs de longueur, comme px, cm , etc., ou en pour cent (%) du bloc contenant .
Remarque: La height et la width des propriétés ne comprennent pas le rembourrage, les frontières ou les marges; ils ont mis la hauteur / largeur de la zone à l'intérieur du rembourrage, la frontière, et la marge de l'élément!
L'exemple suivant montre un <div> élément avec une hauteur de 100 pixels et une largeur de 500 pixels:
Réglage max-width
Le max-width propriété est utilisée pour définir la largeur maximale d'un élément.
Le max-width peut être spécifié dans les valeurs de longueur, comme px, cm , etc., ou en pour cent (%) du bloc contenant, ou réglé sur aucune (ce qui est par défaut. Signifie qu'il n'y a pas de largeur maximale).
Le problème avec le <div> ci - dessus se produit lorsque la fenêtre est plus petite que la largeur de l'élément (500px). Le navigateur ajoute alors une barre de défilement horizontale à la page.
Utilisation max-width à la place, dans cette situation, permettra d' améliorer la manipulation du navigateur de petites fenêtres.
Astuce: Faites glisser la fenêtre du navigateur pour plus petit que 500px de large, pour voir la différence entre les deux divs!
Note: La valeur du max-width remplacements de propriétés de width .
L'exemple suivant montre un <div> élément avec une hauteur de 100 pixels et un max-largeur de 500 pixels:
Exemple
div {
max-width: 500px;
height:
100px;
border: 3px solid #73AD21;
}
Essayez-le vous-même - Exemples
Régler la hauteur et la largeur des éléments
Cet exemple montre comment définir la hauteur et la largeur des différents éléments.
Réglez la hauteur et la largeur d'une image en utilisant pour cent
Cet exemple montre comment définir la hauteur et la largeur d'une image en utilisant une valeur pour cent.
Régler la largeur minimum et maximum la largeur d'un élément
Cet exemple illustre comment définir une largeur minimale et une largeur maximale d'un élément en utilisant une valeur de pixel.
Set min-height et max-hauteur d'un élément
Cet exemple illustre comment définir une hauteur minimale et une hauteur maximale d'un élément en utilisant une valeur de pixel.
Testez-vous avec des exercices!
Toutes les propriétés CSS Dimension
| Propriété | La description |
|---|---|
| height | Définit la hauteur d'un élément |
| max-height | Définit la hauteur maximale d'un élément |
| max-width | Définit la largeur maximale d'un élément |
| min-height | Définit la hauteur minimale d'un élément |
| min-width | Définit la largeur minimale d'un élément |
| width | Définit la largeur d'un élément |