Leçon 12 : La hauteur et la largeur
Nous ne nous sommes pas beaucoup préoccupés, jusqu'à maintenant, des dimensions des éléments avec lesquels nous avons travaillé. Dans cette leçon, nous verrons comment définir facilement la hauteur et la largeur d'un élément.
Fixer la largeur [width]
La propriété width permet de définir la largeur d'un élément.
L'exemple simplifié ci-dessous nous montre une boîte où on peut taper du texte :
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Fixer la hauteur [height]
Dans l'exemple précédent, remarquez la hauteur de la boîte fixée par son contenu. On peut affecter la hauteur d'un élément
avec la propriété height. Essayons de rendre la boîte de l'exemple haute de 500px :
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Résumé
Les leçons 9, 10, 11 et 12 ont introduit le modèle des boîtes dans CSS. Comme vous pouvez le constater, le modèle des boîtes offre beaucoup d'options nouvelles. Vous auriez pu utiliser des tables HTML pour vos dispositions, mais avec CSS et le modèle des boîtes vous devez maintenant être capable d'obtenir des présentations élégantes, plus précises et conformes aux recommandations du W3C.