CSS - Dimension

Hai visto il bordo che circonda ogni scatola, ad es. elemento, il riempimento che può apparire all'interno di ogni riquadro e il margine che può aggirarli. In questo tutorial impareremo come modificare le dimensioni delle scatole.

Abbiamo le seguenti proprietà che ti consentono di controllare le dimensioni di una scatola.

  • Il height viene utilizzata per impostare l'altezza di una scatola.

  • Il width viene utilizzata per impostare la larghezza di una casella.

  • Il line-height viene utilizzata per impostare l'altezza di una riga di testo.

  • Il max-height viene utilizzata per impostare l'altezza massima che può essere una scatola.

  • Il min-height viene utilizzata per impostare l'altezza minima che può essere una scatola.

  • Il max-width viene utilizzata per impostare la larghezza massima che può essere una casella.

  • Il min-width viene utilizzata per impostare la larghezza minima che può essere una casella.

Le proprietà di altezza e larghezza

Le proprietà di altezza e larghezza consentono di impostare l'altezza e la larghezza delle scatole. Possono assumere valori di una lunghezza, una percentuale o la parola chiave auto.

Ecco un esempio:

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

Produrrà il seguente risultato:

La proprietà line-height

La proprietà line-height consente di aumentare lo spazio tra le righe di testo. Il valore della proprietà line-height può essere un numero, una lunghezza o una percentuale.

Ecco un esempio:

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

Produrrà il seguente risultato:

La proprietà max-height

La proprietà max-height consente di specificare l'altezza massima di una casella. Il valore della proprietà max-height può essere un numero, una lunghezza o una percentuale.

NOTE - Questa proprietà non funziona in Netscape 7 o IE 6.

Ecco un esempio:

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

Produrrà il seguente risultato:

La proprietà min-height

La proprietà min-height consente di specificare l'altezza minima di una casella. Il valore della proprietà min-height può essere un numero, una lunghezza o una percentuale.

NOTE - Questa proprietà non funziona in Netscape 7 o IE 6.

Ecco un esempio:

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

Produrrà il seguente risultato:

La proprietà max-width

La proprietà max-width consente di specificare la larghezza massima di una casella. Il valore della proprietà max-width può essere un numero, una lunghezza o una percentuale.

NOTE - Questa proprietà non funziona in Netscape 7 o IE 6.

Ecco un esempio:

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

Questo produrrà il seguente risultato:

La proprietà larghezza minima

La proprietà min-width consente di specificare la larghezza minima di una casella. Il valore della proprietà larghezza minima può essere un numero, una lunghezza o una percentuale.

NOTE - Questa proprietà non funziona in Netscape 7 o IE 6.

Ecco un esempio:

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

Produrrà il seguente risultato: