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]
• Fixer la hauteur [height]

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;
 }
 
 

• Afficher un exemple

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;
 }
 
 

• Afficher un exemple

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.