height / width
La propriété height / width fixe la hauteur / largeur d'un élément. Les valeurs peuvent être exprimées à l'aide d'unités de mesure (px, pt, em, cm etc.) ou bien en pourcentage. La valeur par défaut est le mot clé auto.<style>
#bloc {
width: 4cm;
height: 15px;
background-color: red;
}
</style>
<div id="bloc"></div>
<style>
#blok1 {
width: 8cm;
height: 4cm;
background-color: red;
}
#blok2 {
width: 25%;
height: 50%;
background-color: yellow;
}
</style>
<div id="blok1">
<div id="blok2">
</div>
</div>
Les propriétés height et width peuvent être complétées à l'aide de mots-clés.
- max-content : La boîte sera limitée à la dimension maximum de ce qu'elle contient.
- min-content : La boîte sera limitée à la dimension mminimum de ce qu'elle contient.
<style>
#theBlock {
width: -moz-max-content; /* Firefox */
width: -webkit-max-content; /* Chrome */
border: 1px solid black;
}
#theBlock2 {
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome */
border: 1px solid black;
}
</style>
<div id="theBlock">
La boîte fait la largeur maxi de ce qu'elle peut contenir.
</div>
<p></p>
<div id="theBlock2">
La boîte fait la largeur mini de ce qu'elle contient.
</div>
La boîte fait la largeur maxi de ce qu'elle peut contenir.
La boîte fait la largeur mini de ce qu'elle contient.