Tamaño TamañoEn esta página se tratan los siguientes temas:
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%;
}
|
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>).
| |
<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" width="118" height="70" /></p> |
|
img {
width: 200px;
}
|
En el segundo ejemplo, la imagen toma el ancho de 200px indicado en la hoja de estilo y la altura proporcional correspondiente. En el tercer ejemplo, la imagen toma el ancho de 200px indicado en la hoja de estilo, pero mantiene la altura de 70px indicada en el atributo 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;
|
Hola, mundo |
| |
p {
border: black 1px solid; height: 50px;
max-width: 250px;
|
Hola, mundo |
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;
|
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;
|
Este párrafo ya está fuera de la división. |
| |
div {
border: black 1px solid;
|
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;
|
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;
|
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. |
