CSS - Dimensión

Has visto el borde que rodea cada caja, es decir. elemento, el relleno que puede aparecer dentro de cada cuadro y el margen que puede rodearlos. En este tutorial aprenderemos cómo podemos cambiar las dimensiones de las cajas.

Contamos con las siguientes propiedades que le permiten controlar las dimensiones de una caja.

  • los height La propiedad se utiliza para establecer la altura de una caja.

  • los width La propiedad se utiliza para establecer el ancho de una caja.

  • los line-height La propiedad se utiliza para establecer la altura de una línea de texto.

  • los max-height La propiedad se utiliza para establecer la altura máxima que puede tener una caja.

  • los min-height La propiedad se utiliza para establecer la altura mínima que puede tener una caja.

  • los max-width La propiedad se utiliza para establecer el ancho máximo que puede tener una caja.

  • los min-width La propiedad se utiliza para establecer el ancho mínimo que puede tener una caja.

Las propiedades de altura y anchura

Las propiedades de alto y ancho le permiten establecer el alto y el ancho de las cajas. Pueden tomar valores de longitud, porcentaje o la palabra clave auto.

Aquí hay un ejemplo:

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

Producirá el siguiente resultado:

La propiedad de altura de línea

La propiedad line-height le permite aumentar el espacio entre líneas de texto. El valor de la propiedad line-height puede ser un número, una longitud o un porcentaje.

Aquí hay un ejemplo:

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

Producirá el siguiente resultado:

La propiedad de altura máxima

La propiedad max-height le permite especificar la altura máxima de una caja. El valor de la propiedad max-height puede ser un número, una longitud o un porcentaje.

NOTE - Esta propiedad no funciona ni en Netscape 7 ni en IE 6.

Aquí hay un ejemplo:

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

Producirá el siguiente resultado:

La propiedad min-height

La propiedad min-height le permite especificar la altura mínima de una caja. El valor de la propiedad min-height puede ser un número, una longitud o un porcentaje.

NOTE - Esta propiedad no funciona ni en Netscape 7 ni en IE 6.

Aquí hay un ejemplo:

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

Producirá el siguiente resultado:

La propiedad de ancho máximo

La propiedad max-width le permite especificar el ancho máximo de una caja. El valor de la propiedad max-width puede ser un número, una longitud o un porcentaje.

NOTE - Esta propiedad no funciona ni en Netscape 7 ni en IE 6.

Aquí hay un ejemplo:

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

Esto producirá el siguiente resultado:

La propiedad de ancho mínimo

La propiedad min-width le permite especificar el ancho mínimo de una caja. El valor de la propiedad min-width puede ser un número, una longitud o un porcentaje.

NOTE - Esta propiedad no funciona ni en Netscape 7 ni en IE 6.

Aquí hay un ejemplo:

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

Producirá el siguiente resultado: