Width & Height

width & height

Les propriétés width et height permettent de définir respectivement la largeur et la hauteur d'un élément. Par défaut leur valeur est à auto.

width width height height min-width & min-height

Les propriétés min-width et min-height permettent de définir une largeur et une hauteur minimum à un élément.

Par exemple, pour s'assurer qu'un élément ne soit jamais plus petit que 400px, il est possible d'utiliser:

.element { width: 50%; min-width: 400px; }

Puisque min-width a préséance sur width, l'élément adoptera alors sa largeur.

Si l'élément est dans un parent ayant un width de:

• 1000px: 400px < 500px (50%) ➡️ 500px
• 500px: 400px > 250px (50%) ➡️ 400px

min-width min-width min-height min-height max-width & max-height

Les propriétés max-width et max-height permettent de définir une largeur et une hauteur maximale à un élément.

Par exemple, pour s'assurer qu'un élément ne soit jamais plus grand que 400px, il est possible d'utiliser:

.element { width: 50%; max-width: 400px; }

Puisque max-width a préséance sur width, l'élément adoptera alors sa largeur.

Si l'élément est dans un parent ayant un width de:

• 1000px: 400px < 500px (50%) ➡️ 400px
• 500px: 400px > 250px (50%) ➡️ 250px

max-width: 100% est régulièrement appliqué aux images. Ainsi, les images prennent leur largeur normale, mais ne dépassent jamais de l’écran. max-width max-width max-height max-height

EXERCICE Width/Height - System32 Pour cet exercice, vous devez créer en HTML et CSS une page présentant une bande dessinée d’Andrew AKA system32comics.

EXERCICE Width/Height - Prévert Pour cet exercice vous devrez en CSS compléter l’affichage du célèbre poème: Le cancre, du français Jacques Prévert.