Les propriétés CSS height et width sont utilisées pour définir la hauteur et largeur d'un élément.
La propriété CSS max-width est utilisée pour définir la largeur maximale d'un élément.
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 100%;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS height and width properties</h2>
<div>This div element has a height of 50 pixels and a width of 100%.</div>
</body>
</html>
Les propriétés hauteur et largeur sont utilisées pour définir la hauteur et largeur d'un élément.
Les propriétés de hauteur et de largeur n'incluent pas le remplissage, les bordures ou les marges. Il définit la hauteur/largeur de la zone à l'intérieur du remplissage, de la bordure et de la marge de l'élément.
Les propriétés hauteur et largeur peut avoir les valeurs suivantes :
auto - C'est la valeur par défaut. Le navigateur calcule la hauteur et la largeur
length - Définit la hauteur/largeur en px, cm, etc.
% - Définit la hauteur/largeur en pourcentage de le bloc contenant
initial - Définit la hauteur/largeur à sa valeur par défaut
inherit - La hauteur/largeur sera hérité de sa valeur parent
Définissez la hauteur et la largeur d'un élément <div> :
div {
height:
200px;
width: 50%;
background-color: powderblue;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>
</body>
</html>
Définissez la hauteur et la largeur d'un autre élément <div> :
div {
height:
100px;
width: 500px;
background-color: powderblue;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 100px and a width of 500px.</div>
</body>
</html>
Remarque : N'oubliez pas que les propriétés hauteur et largeur n'incluent pas le remplissage, ni les bordures. , ou des marges ! Ils définissent la hauteur/largeur de la zone à l'intérieur du remplissage, de la bordure, et marge de l'élément !
La propriété max-width est utilisée pour définir la largeur maximale d'un élément.
La max-width peut être spécifiée en valeurs de longueur, comme px, cm, etc., ou en pourcentage (%) de la contenant le bloc, ou défini sur aucun (c'est 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 ensuite une barre de défilement horizontale à la page.
L'utilisation de max-width à la place, dans cette situation, améliorera la gestion des petites fenêtres par le navigateur.
Conseil : faites glisser la fenêtre du navigateur vers une largeur inférieure à 500 px pour voir la différence entre les deux divs !
Remarque : Si, pour une raison quelconque, vous utilisez à la fois width et la propriété max-width sur le même élément, et la valeur du La propriété width est plus grande que la Propriété max-width ; le La propriété max-width sera utilisée (et la propriété La propriété width sera ignorée).
Cet élément <div> a une hauteur de 100 pixels et un largeur maximale de 500 pixels :
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Définir la hauteur et la largeur des éléments
<!DOCTYPE html>
<html>
<head>
<style>
img.one {
height: auto;
}
img.two {
height: 200px;
width: 200px;
}
div.three {
height: 300px;
width: 300px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of elements</h2>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (200x200 pixels):</p>
<img class="two" src="ocean.jpg" width="300" height="300"><br>
<p>The height and width of this div element is 300px:</p>
<div class="three"></div>
</body>
</html>
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 le pourcentage
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 400px;
min-width: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width and min-width of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-height: 600px;
min-height: 400px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
Cet exemple montre comment définir une hauteur minimale et une hauteur maximale d'un élément à l'aide d'une valeur de pixel.
Définit la hauteur d'un élément
Définit la hauteur maximale d'un élément
Définit la largeur maximale d'un élément
Définit la hauteur minimale d'un élément
Définit la largeur minimale d'un élément
Définit la largeur d'un élément