CSS - Dimensão

Você viu a borda que cerca cada caixa, ou seja. elemento, o preenchimento que pode aparecer dentro de cada caixa e a margem que pode contorná-los. Neste tutorial, aprenderemos como podemos alterar as dimensões das caixas.

Temos as seguintes propriedades que permitem controlar as dimensões de uma caixa.

o height propriedade é usada para definir a altura de uma caixa.
o width propriedade é usada para definir a largura de uma caixa.
o line-height propriedade é usada para definir a altura de uma linha de texto.
o max-height propriedade é usada para definir a altura máxima que uma caixa pode ter.
o min-height propriedade é usada para definir a altura mínima que uma caixa pode ter.
o max-width propriedade é usada para definir a largura máxima que uma caixa pode ter.
o min-width propriedade é usada para definir a largura mínima que uma caixa pode ter.

As propriedades de altura e largura

As propriedades de altura e largura permitem que você defina a altura e a largura das caixas. Eles podem assumir valores de comprimento, porcentagem ou a palavra-chave auto.

Aqui está um exemplo -

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

Isso produzirá o seguinte resultado -

A propriedade line-height

A propriedade line-height permite aumentar o espaço entre as linhas de texto. O valor da propriedade line-height pode ser um número, um comprimento ou uma porcentagem.

Aqui está um exemplo -

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

Isso produzirá o seguinte resultado -

A propriedade max-height

A propriedade max-height permite que você especifique a altura máxima de uma caixa. O valor da propriedade max-height pode ser um número, um comprimento ou uma porcentagem.

NOTE - Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo -

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

Isso produzirá o seguinte resultado -

A propriedade min-height

A propriedade min-height permite que você especifique a altura mínima de uma caixa. O valor da propriedade min-height pode ser um número, um comprimento ou uma porcentagem.

NOTE - Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo -

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

Isso produzirá o seguinte resultado -

A propriedade max-width

A propriedade max-width permite que você especifique a largura máxima de uma caixa. O valor da propriedade max-width pode ser um número, um comprimento ou uma porcentagem.

NOTE - Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo -

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

Isso produzirá o seguinte resultado -

A propriedade min-width

A propriedade min-width permite que você especifique a largura mínima de uma caixa. O valor da propriedade min-width pode ser um número, um comprimento ou uma porcentagem.

NOTE - Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo -

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

Isso produzirá o seguinte resultado -

↰ Previous page Next page ↱