# Tamaño

En esta página se tratan los siguientes temas:

## Tamaño: width y height

La propiedad width establece el ancho de un elemento mediante un valor numérico (con su unidad) o un porcentaje (con respecto al elemento padre). Si no se establece la anchura de un elemento, el elemento ocupa todo el ancho disponible.

    p {
      border: black 1px solid;
    }
| Hola, mundo
    p {
      border: black 1px solid;
      width: 50%;
    }
| Hola, mundo
    p {
      border: black 1px solid;
      width: 20em;
    }
| Hola, mundo
    p {
      border: black 1px solid;
      width: 200px;
    }
| Hola, mundo

La propiedad height establece la altura de un elemento mediante un valor numérico (con su unidad), pero no en porcentaje. Si no se establece la altura de un elemento, el elemento ocupa el espacio necesario para mostrar su contenido (sin contar los elementos flotantes).

    p {
      border: black 1px solid;
    }
| Si no se establece la altura de un elemento, el elemento ocupa el espacio necesario para mostrar su contenido (sin contar los elementos flotantes).
    p {
      border: black 1px solid;
      height: 50%; /* Los navegadores no hacen caso de esta propiedad */
    }
| Hola, mundo
    p {
      border: black 1px solid;
      height: 3em;
    }
| Hola, mundo
    p {
      border: black 1px solid;
      height: 100px;
    }
| Hola, mundo

Si se establece la anchura y altura de un elemento, el contenido del elemento puede no caber en el tamaño asignado. La propiedad overflow establece el comportamiento en esto casos.

Las propiedades width y height también se pueden aplicar a imágenes (esos valores tienen prioridad sobre los establecidos en los atributos width y height de la etiqueta <img>).

Si la etiqueta <img> no tiene los atributos width y height:

- si sólo se indica una propiedad (width o height), la imagen cambia de tamaño manteniendo la proporción.
- si se indican las dos propiedades (width y height), la imagen cambia al tamaño indicado.

    <p><img alt="Logotipo de cdlibre.org"
      src="../img/cdlibre_logo.png" /></p>
    img {
    }
    <p><img alt="Logotipo de cdlibre.org"
      src="../img/cdlibre_logo.png" /></p>
    img {
      width: 200px;
    }
    <p><img alt="Logotipo de cdlibre.org"
      src="../img/cdlibre_logo.png" /></p>
    img {
      height: 50px;
    }
    <p><img alt="Logotipo de cdlibre.org"
      src="../img/cdlibre_logo.png" /></p>
    img {
      height: 50px;
      width: 200px;
    }

Si la etiqueta <img> tiene los atributos width y height:

- si sólo se indica una propiedad (width o height), la imagen cambia de tamaño solamente en la dimensión indicada.
- si se indican las dos propiedades (width y height), la imagen cambia al tamaño indicado.

    <p><img alt="Logotipo de cdlibre.org"
      src="../img/cdlibre_logo.png"
      width="59" height="35" /></p>
    img {
    }
    <p><img alt="Logotipo de cdlibre.org"
      src="../img/cdlibre_logo.png"
      width="59" height="35" /></p>
    img {
      width: 200px;
    }
    <p><img alt="Logotipo de cdlibre.org"
      src="../img/cdlibre_logo.png"
      width="59" height="35" /></p>
    img {
      height: 100px;
    }
    <p><img alt="Logotipo de cdlibre.org"
      src="../img/cdlibre_logo.png"
      width="59" height="35" /></p>
    img {
      height: 100px;
      width: 200px;
    }

Si el tamaño se expresa en porcentaje, se interpreta con respecto al elemento que lo contiene. En el ejemplo siguiente, la imagen ocupa la mitad del espacio.

    <p><img alt="Logotipo de cdlibre.org"
      src="../img/cdlibre_logo.png" /></p>
    img {
      width: 50%;
    }

Volver al principio de la página

## Tamaño mínimo y máximo: min-width, min-height, max-width y max-height

Las propiedades min-width y min-height establecen el tamaño mínimo de un elemento mediante un valor numérico (con su unidad) o un porcentaje (con respecto al elemento padre).

Las propiedades max-width y max-height establecen el tamaño máximo de un elemento mediante un valor numérico (con su unidad) o un porcentaje (con respecto al elemento padre).

Los ejemplos siguientes muestran el funcionamiento de las propiedades anteriores. Los tamaños de división definidos en porcentaje se refieren a porcentajes con respecto al ancho de la celda de la tabla, que a su vez depende del ancho de la ventana del navegador. Al estrechar la ventana se puede observar cómo se estrechan las divisiones cuyo tamaño está expresado en porcentaje, mientras que permanecen iguales aquellas cuyo tamaño está expresado en píxeles, y cómo las propiedades min-width y max-width limitan el estrechamiento.

    p {
      border: black 1px solid; height: 50px;
      width: 250px;
    }
| Hola, mundo
    p {
      border: black 1px solid; height: 50px;
      width: 200px;
    }
| Hola, mundo
    p {
      border: black 1px solid; height: 50px;
      width: 80%;
    }
| Hola, mundo
    p {
      border: black 1px solid; height: 50px;
      min-width: 200px;
      width: 80%;
    }
| Hola, mundo
    p {
      border: black 1px solid; height: 50px;
      max-width: 250px;
      width: 80%;
    }
| Hola, mundo
    p {
      border: black 1px solid; height: 50px;
      max-width: 250px;
      min-width: 200px;
      width: 80%;
    }
| Hola, mundo

Volver al principio de la página

## Desbordamiento: overflow

La propiedad overflow establece el tratamiento que debe dar el navegador al contenido que no cabe en el elemento padre. Los valores posibles de esta propiedad son: visible, hidden (oculto), scroll (mostrar siempre barras de desplazamiento), auto (mostrar barras cuando sea necesario). El valor por omisión es visible.

Si está definido el tamaño del elemento y overflow tiene el valor visible, el contenido desborda el elemento y se superpone a los siguientes elementos.

    div {
      border: black 1px solid;
      height: 100px;
      width: 100px;
    }
| Esta división contiene un párrafo bastante largo que no cabe en el tamaño asignado. Este párrafo ya está fuera de la división.
    div {
      border: black 1px solid;
      height: 100px;
      overflow: visible;
      width: 100px;
    }
| Esta división contiene un párrafo bastante largo que no cabe en el tamaño asignado. Este párrafo ya está fuera de la división.
    div {
      border: black 1px solid;
      height: 100px;
      overflow: hidden;
      width: 100px;
    }
| Esta división contiene un párrafo bastante largo que no cabe en el tamaño asignado. Este párrafo ya está fuera de la división.
    div {
      border: black 1px solid;
      height: 100px;
      overflow: scroll;
      width: 100px;
    }
| Esta división contiene un párrafo bastante largo que no cabe en el tamaño asignado. Este párrafo ya está fuera de la división.
    div {
      border: black 1px solid;
      height: 100px;
      overflow: auto;
      width: 100px;
    }
| Esta división contiene un párrafo bastante largo que no cabe en el tamaño asignado. Este párrafo ya está fuera de la división.
    div {
      border: black 1px solid;
      height: 100px;
      overflow: auto;
      width: 100px;
    }
| Esta_división_contiene_un_párrafo_bastante_largo_que_no_cabe_en_el_tamaño_asignado. Este párrafo ya está fuera de la división.

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.