Tamaño. CSS. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org

En esta lección se comentan propiedades CSS definidas en la recomendación CSS 2.1, publicada en junio de 2011.

Estas propiedades permiten establecer el tamaño de los elementos de una página web.

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

p {
  border: black 1px solid;
  width: 50%;
}

p {
  border: black 1px solid;
  width: 20em;
}

p {
  border: black 1px solid;
  width: 200px;
}

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

p {
  border: black 1px solid;
  height: 50%;
  /* Los navegadores no hacen caso de esta propiedad */
}

p {
  border: black 1px solid;
  height: 3em;
}

p {
  border: black 1px solid;
  height: 100px;
}

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.

Tamaño de imágenes

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 src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org"></p>

img {
}

<p><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org"></p>

img {
  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 src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org" width="59" height="35"></p>

img {
}

<p><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org" width="59" height="35"></p>

img {
  width: 200px;
}

<p><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org" width="59" height="35"></p>

img {
  height: 100px;
}

<p><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org" 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 src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org"></p>

img {
  width: 50%;
}

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 tamaño mínimo y máximo respectivamente.

p {
  border: black 1px solid;
  height: 60px;
}
p.p1 {
  width: 300px;
}
p.p2 {
  width: 350px;
}
p.p3 {
  width: 90%;
}
p.p4 {
  min-width: 300px;
  width: 90%;
}
p.p5 {
  max-width: 350px;
  width: 90%;
}
p.p6 {
  max-width: 350px;
  min-width: 300px;
  width: 90%;
}

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 {
  height: 100px;
  width: 100px;
  border: black 1px solid;
}

div {
  height: 100px;
  width: 100px;
  overflow: visible;
  border: black 1px solid;
}

div {
  height: 100px;
  width: 100px;
  overflow: hidden;
  border: black 1px solid;
}

div {
  height: 100px;
  width: 100px;
  overflow: scroll;
  border: black 1px solid;
}

div {
  height: 100px;
  width: 100px;
  overflow: auto;
  border: black 1px solid;
}

div {
  height: 100px;
  width: 100px;
  overflow: auto;
  border: black 1px solid;
}

El valor auto de la propiedad overflow también se puede utilizar para que los elementos flotantes se tengan en cuenta al calcular el tamaño de los elementos que los contienen, como se comenta en la lección sobre posicionamiento flotante.

CSS: Tamaño

Tamaño: width y height

Tamaño de imágenes

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

Desbordamiento: overflow