La propriété width en CSS définit la largeur d'un élément. La propriété height définit la hauteur de l'élément.
div {
width:300px;
height:300px;
background:red;
}
Notez qu'il ne vous sera pas possible de forcer la hauteur et largeur d'un élément en "inline";
Différentes unités peuvent être utilisées pour la valeur de "width", "height" mais aussi pour les tailles de typographie que nous verrons plus tard.
Dans le cas des des unités pour définir des largeurs et hauteurs, nous n'allons voir qu'une partie des différentes unitées possible à savoir : px, %, vh, vw.
px (pixels) est une unité absolue de mesure. Elle définit la taille en termes de pixels sur l'écran.% (pourcentage) est une unité relative de mesure. Elle définit la taille par rapport à la taille de l'élément parent. Par exemple, si vous définissez une largeur de 50%, cela signifie que l'élément sera aussi large que la moitié de son parent.vh (vues verticales) est une unité relative de mesure qui représente 1% de la hauteur de la fenêtre du navigateur. Cela permet de définir la taille de manière dynamique en fonction de la taille de la fenêtre du navigateur.vw (vues horizontales) est une unité relative de mesure qui représente 1% de la largeur de la fenêtre du navigateur. Cela permet de définir la taille de manière dynamique en fonction de la largeur de la fenêtre du navigateur.Dans cet exemple, la première div “conteneur” fera 300px de largeur, 200px de hauteur et sera sur fond bleu.
Son “enfant”, la div “element”, fera 75% de son “parent” : le conteneur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.conteneur {
height: 200px;
width: 300px;
background: blue;
}
.element {
background: red;
height: 50px;
width: 75%; /* occupera une taille de 75% de son parent */
/*width:75vw;*/ /*occupera une taille de 75% de la largeur du navigateur*/
/*width:75vh;*/ /*occupera une taille de 75% de la hauteur du navigateur*/
}
</style>
</head>
<body>
<div class="conteneur">
<div class="element"></div>
</div>
</body>
</html>