CSS 2: Tamaño

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 1px solid;
  width: 50%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 1px solid;
  width: 20em;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 1px solid;
  width: 200px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 1px solid;
  height: 50%;
  /* Los navegadores no hacen caso de esta propiedad */
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 1px solid;
  height: 3em;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 1px solid;
  height: 100px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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:

<p><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org" /></p>
img {
}
ERROR (no puede mostrarse el objeto)
Enlace externo
<p><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org" /></p>
img {
  width: 200px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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

<p><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org" width="59" height="35" /></p>
img {
}
ERROR (no puede mostrarse el objeto)
Enlace externo
<p><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org" width="59" height="35" /></p>
img {
  width: 200px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
<p><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org" width="59" height="35" /></p>
img {
  height: 100px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
<p><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre.org" width="59" height="35" /></p>
img {
  height: 100px;
  width: 200px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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

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%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
div {
  height: 100px;
  width: 100px;
  overflow: visible;
  border: black 1px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
div {
  height: 100px;
  width: 100px;
  overflow: hidden;
  border: black 1px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
div {
  height: 100px;
  width: 100px;
  overflow: scroll;
  border: black 1px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
div {
  height: 100px;
  width: 100px;
  overflow: auto;
  border: black 1px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
div {
  height: 100px;
  width: 100px;
  overflow: auto;
  border: black 1px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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.