Volver al índice 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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 1px solid;
}

      

Hola, mundo

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 1px solid;
  width: 50%;
}

      

Hola, mundo

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 1px solid;
  width: 20em;
}

      

Hola, mundo

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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).

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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).

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 1px solid;
  height: 50%; 
  /* Los navegadores no hacen caso de esta propiedad */
}

      

Hola, mundo

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 1px solid;
  height: 3em;
}

      

Hola, mundo

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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:

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<p><img alt="Logotipo de cdlibre.org"
  src="../img/cdlibre_logo.png" /></p>

Logotipo de cdlibre.org

img { 
}
Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<p><img alt="Logotipo de cdlibre.org"
  src="../img/cdlibre_logo.png" /></p>

Logotipo de cdlibre.org

img { 
  width: 200px;
}
Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<p><img alt="Logotipo de cdlibre.org"
  src="../img/cdlibre_logo.png" /></p>

Logotipo de cdlibre.org

img { 
  height: 50px;
}
Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<p><img alt="Logotipo de cdlibre.org"
  src="../img/cdlibre_logo.png" /></p>

Logotipo de cdlibre.org

img { 
  height: 50px;
  width: 200px;
}

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

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<p><img alt="Logotipo de cdlibre.org"
  src="../img/cdlibre_logo.png" 
  width="59" height="35" /></p>        

Logotipo de cdlibre.org

img { 
}
Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<p><img alt="Logotipo de cdlibre.org"
  src="../img/cdlibre_logo.png" 
  width="59" height="35" /></p>        

Logotipo de cdlibre.org

img { 
  width: 200px;
}
Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<p><img alt="Logotipo de cdlibre.org"
  src="../img/cdlibre_logo.png" 
  width="59" height="35" /></p>        

Logotipo de cdlibre.org

img { 
  height: 100px;
}
Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<p><img alt="Logotipo de cdlibre.org"
  src="../img/cdlibre_logo.png" 
  width="59" height="35" /></p>        

Logotipo de cdlibre.org

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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<p><img alt="Logotipo de cdlibre.org"
  src="../img/cdlibre_logo.png" /></p>

Logotipo de cdlibre.org

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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 1px solid; height: 50px; 
  width: 250px;
}

Hola, mundo

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 1px solid; height: 50px; 
  width: 200px;
}

Hola, mundo

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 1px solid; height: 50px; 
  width: 80%; 
}

Hola, mundo

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 1px solid; height: 50px; 
  min-width: 200px; 
  width: 80%; 
}

Hola, mundo

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  border: black 1px solid; height: 50px; 
  max-width: 250px;
width: 80%; }

Hola, mundo

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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

Última modificación de esta página: 20 de diciembre de 2011

Licencia de Creative Commons
Páginas web HTML / XHTML y hojas de estilo CSS por Bartolomé Sintes Marco
se distribuye bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional (CC BY-SA 4.0).