CSS - Dimension

Vous avez vu la bordure qui entoure chaque boîte ie. élément, le rembourrage qui peut apparaître à l'intérieur de chaque boîte et la marge qui peut les contourner. Dans ce tutoriel, nous allons apprendre comment modifier les dimensions des boîtes.

Nous avons les propriétés suivantes qui vous permettent de contrôler les dimensions d'une boîte.

  • le height La propriété est utilisée pour définir la hauteur d'une boîte.

  • le width La propriété est utilisée pour définir la largeur d'une boîte.

  • le line-height La propriété est utilisée pour définir la hauteur d'une ligne de texte.

  • le max-height La propriété est utilisée pour définir une hauteur maximale qu'une boîte peut avoir.

  • le min-height La propriété est utilisée pour définir la hauteur minimale qu'une boîte peut avoir.

  • le max-width La propriété est utilisée pour définir la largeur maximale qu'une boîte peut avoir.

  • le min-width La propriété est utilisée pour définir la largeur minimale qu'une boîte peut avoir.

Les propriétés de hauteur et de largeur

Les propriétés de hauteur et de largeur vous permettent de définir la hauteur et la largeur des boîtes. Ils peuvent prendre des valeurs d'une longueur, d'un pourcentage ou du mot-clé auto.

Voici un exemple -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400pixels wide and 100 pixels high
      </p>
   </body>
</html>

Il produira le résultat suivant -

La propriété line-height

La propriété line-height vous permet d'augmenter l'espace entre les lignes de texte. La valeur de la propriété line-height peut être un nombre, une longueur ou un pourcentage.

Voici un exemple -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
         This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
         This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
      </p>
   </body>
</html>

Il produira le résultat suivant -

La propriété max-height

La propriété max-height vous permet de spécifier la hauteur maximale d'une boîte. La valeur de la propriété max-height peut être un nombre, une longueur ou un pourcentage.

NOTE - Cette propriété ne fonctionne ni dans Netscape 7 ni dans IE 6.

Voici un exemple -

<html>
   <head>
   </head>  
   <body>
      <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
      </p>
      <br>
      <br>
      <br>
      <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
   </body>
</html>

Il produira le résultat suivant -

La propriété min-height

La propriété min-height vous permet de spécifier la hauteur minimale d'une boîte. La valeur de la propriété min-height peut être un nombre, une longueur ou un pourcentage.

NOTE - Cette propriété ne fonctionne ni dans Netscape 7 ni dans IE 6.

Voici un exemple -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
   </body>
</html>

Il produira le résultat suivant -

La propriété max-width

La propriété max-width vous permet de spécifier la largeur maximale d'une boîte. La valeur de la propriété max-width peut être un nombre, une longueur ou un pourcentage.

NOTE - Cette propriété ne fonctionne ni dans Netscape 7 ni dans IE 6.

Voici un exemple -

<html>
   <head>
   </head>

   <body>
      <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
      </p>
      <img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Cela produira le résultat suivant -

La propriété min-width

La propriété min-width vous permet de spécifier la largeur minimale d'une boîte. La valeur de la propriété min-width peut être un nombre, une longueur ou un pourcentage.

NOTE - Cette propriété ne fonctionne ni dans Netscape 7 ni dans IE 6.

Voici un exemple -

<html>
   <head>
   </head>

   <body>
      <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 100px high and min width is 400px
         This paragraph is 100px high and min width is 400px
      </p>
      <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Il produira le résultat suivant -