Hauteur (height) et largeur (width)

Hauteur et largeur

Sur ce cours, nous allons apprendre comment choisir la hauteur ou la largeur d’un élément. D’une manière générale, pour déterminer la hauteur on utilise height et pour déterminer la largeur on utilise width.

1. La hauteur

Pour la hauteur on utilise height qui prend comme valeur la taille (en pixels ou en pourcentage), ou auto.
Prenons l’exemple d’une image:
nous allons déterminer une hauteur de 189px.
Code html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//FR" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content ="text/html; charset=ISO-8859-1" http-equiv = "content-type"> <link rel="stylesheet" media="screen" type="text/css" title= "mon cours de CSS" href="style.css" > <title> cours css: hauteur et largeur</title> </head> <body> <img src="photo.jpg"> </body> </html>
Code CSS(style.css):
img { height: 189px; }

Il faut aussi noter qu’on peut utiliser :

line-height pour déterminer la hauteur d’une ligne d’un bloc de texte.
max-height pour déterminer la hauteur maximum
min-height pour déterminer la hauteur minimum

2. La largeur

Pour déterminer la largeur, on utilise width qui prend comme valeur la taille (en pixels ou en pourcentage), ou auto.

Prenons l’exemple d’une image:
nous allons déterminer une largeur de 306px.
Code html:

Code CSS(style.css):
Il faut aussi noter qu’on peut utiliser :

max-width pour déterminer la largeur maximum
min-width pour déterminer la largeur minimum

Hauteur et largeur

1. La hauteur

2. La largeur

Une question? Cliquez ici pour la poser.

Retour sur le portail du HTML/CSS

Posez une question

Participez à ces discussions

Publier un cours ou un tutoriel